Javascript和HTML，不输出Javascript函数

Javascript and HTML, no output of Javascript function

本文关键字：Javascript 输出 函数 HTML      更新时间：2023-09-26

我对HTML和Javascript真的很陌生，所以请原谅我的任何明显的错误。

我试图得到一个Javascript函数的工作，并返回一个值在HTML。

函数接受一个数字的输入并返回一个罗马数字。

唯一发生的事情是显示一个黑色的'>'字符，也忽略了我的<style>声明它是#839496。

我代码:

    <!doctype html>
    <html>
    <head>
    <title>Numbers</title>
    <style>
    body {background-color:#002b36}
         h1   {color:#fdf6e3}
         h2   {color:#fdf6e3} {font-size: size 9}
         h3   {color:#fdf6e3} {font-size: size 19}
         p    {color:#839496}
    </style>
    </head>
    <body>
    <h1>Numbers</h1>
    <h2>An app to display detailed info about a number</h2>
    <hr>
    <br />
    <form id="form">
    <input id="num" type="number" min="1" name="num">
    <button onclick="document.getElementById("rom").innerHTML =  result;">Get results</button>
    </form>
    <h3>Results</h3>
    <hr>
    <p id="rom"></p>
    <script javascript type="text/javascript">
    document.getElementById("num").value = num;
    num = parseInt(document.getElementById("num").value);
    var result = '',
        ref = ['M','CM','D','CD','C','XC','L','XL','X','IX','V','IV','I'],
        xis = [1000,900,500,400,100,90,50,40,10,9,5,4,1];
    if (num <= 3999999 && num >= 4000) {
        num += ''; // need to convert to string for .substring()
        result = '<label style="text-decoration: overline;">'+convert(num.substring(0,num.length-3))+'</label>';
        num = num.substring(num.length-3);
    }
    for (x = 0; x < ref.length; x++){
        while(num >= xis[x]){
            result += ref[x];
            num -= xis[x];
        }
    }
document.getElementById("rom").innerHTML = (result);
</script javascript type="text/javascript">

</script>
  </body>
</html>

仅在加载页面时读取文本框num的值。因此，当用户进行更改时，您将永远无法获得该值。您需要更改代码，使其驻留在函数中。当您单击该按钮时，它调用运行带有更新值的代码的函数。

第二个问题是双引号里面有双引号。所以内部的设置关闭了外部。你需要在它们里面使用单引号。最好是不显眼地添加事件。

脚本标签中的javascript没有意义，去掉它。<script type="text/javascript"></script javascript type="text/javascript">也是错误的。去掉类型，结束标签不应该有属性。你有一个额外的</script>标签。

在定义num之前使用它。

样式不会把所有的东西都放到它自己的组里。并且没有设置字体的"大小"。应该是

h2 {
    color:#fdf6e3;
    font-size:9px;
}      

<!doctype html>
<html>
  <head>
    <title>Numbers</title>
    <style>
      body {background-color: #002b36; }
      h1   { color:#fdf6e3; }
      h2   { color:#fdf6e3; font-size: 9px; }
      h3   { color:#fdf6e3; font-size: 9px; }
      p    { color:#839496; }
    </style>
  </head>
  <body>
    <h1>Numbers</h1>
    <h2>An app to display detailed info about a number</h2>
    <hr>
    <br />
    <form id="form">
      <input id="num" type="number" min="1" name="num">
      <button onclick="calculate(); return false;">Get results</button>
    </form>
    <h3>Results</h3>
    <hr>
    <p id="rom"></p>
    <script type="text/javascript">
      function calculate () {
        num = parseInt(document.getElementById("num").value);
        var result = '',
          ref = ['M','CM','D','CD','C','XC','L','XL','X','IX','V','IV','I'],
          xis = [1000,900,500,400,100,90,50,40,10,9,5,4,1];
        if (num <= 3999999 && num >= 4000) {
          num += ''; // need to convert to string for .substring()
          result = '<label style="text-decoration: overline;">'+convert(num.substring(0,num.length-3))+'</label>';
          num = num.substring(num.length-3);
        }
        for (x = 0; x < ref.length; x++){
          while(num >= xis[x]){
            result += ref[x];
            num -= xis[x];
          }
        }
        document.getElementById("rom").innerHTML = result;
      }
    </script>
  </body>
</html>

试试这个

<!doctype html>
        <html>
        <head>
        <title>Numbers</title>
        <style>
        body {background-color:#002b36}
             h1   {color:#fdf6e3}
             h2   {color:#fdf6e3;font-size:9px}
             h3   {color:#fdf6e3;font-size:19px}
             p    {color:#839496}
        </style>
        </head>
        <body>
        <h1>Numbers</h1>
        <h2>An app to display detailed info about a number</h2>
        <hr>
        <br />
        <form id="form">
        <input id="num" type="number" min="1" name="num">
        <button onclick="document.getElementById("rom").innerHTML =  result;">Get results</button>
        </form>
        <h3>Results</h3>
        <hr>
        <p id="rom"></p>
        <script>
        document.getElementById("num").value = num;
        num = parseInt(document.getElementById("num").value);
        var result = '',
            ref = ['M','CM','D','CD','C','XC','L','XL','X','IX','V','IV','I'],
            xis = [1000,900,500,400,100,90,50,40,10,9,5,4,1];
        if (num <= 3999999 && num >= 4000) {
            num += ''; // need to convert to string for .substring()
            result = '<label style="text-decoration: overline;">'+convert(num.substring(0,num.length-3))+'</label>';
            num = num.substring(num.length-3);
        }
        for (x = 0; x < ref.length; x++){
            while(num >= xis[x]){
                result += ref[x];
                num -= xis[x];
            }
        }
       document.getElementById("rom").innerHTML = (result);
       </script>

  </body>
</html>
相关文章：