Question

任何人都可以帮助我。我是java和HTML的新手，但我试图制作一个简单的应用程序，从电机尺寸的下拉列表中获取输入并将它们从HP转换为KW。我无法打印结果。我的想法用完了，我的小代码在下面

<!DOCTYPE html>
<html>
<body>

<fieldset class="Desired">
    <legend>Input Supply:</legend>
    <center>
    <div class="form">
    <p><b>Motor(HP):</b></p>
    <form action="/action_page.php" id= "motork">
        <select id="motor" name="motor">
                <option value="24">24</option>
                <option value="30">30</option>
                <option value="60">60</option>
        </select>
    </form>
    </div>

    <center>
    <br>
    <input onclick="converttokw()" type="button" value="Calculate" class="btn1" > 
    </center>

    <p id="demo"></p>

<script>

    var motorsize= new Array();
        motor["24"]=24;
        motor["30"]=30;
        motor["60"]=60;

    function converttokw() {
            var kw=0;
            var HP= document.forms["motork"];
            var selectedHP = theForm.elements["motor"];
            kw = motorsize[selectedHP.value]*746;
            return kw;
      document.getElementById("demo").innerHTML = kw

    }

</script>

</body>
</html>

Answer 1

没有<center>，没有<b>，没有<br>仅用于垂直间距时 - 您不使用HTML进行样式设置。你用CSS风格。但是你有足够的时间来学习它。

Java是旧的Sun技术，它曾经通过applet在网页上运行。现在它用于制作智能手机软件。但是在浏览器中，它是一种完全不同的语言，它被称为JavaScript。不要混淆。

现在针对您的问题，首先打开您最好的盟友：控制台。关键是F12。控制台将显示脚本中的错误（如果有），以及通过调用console.log来记录的消息。

您的新朋友在控制台上，您已经可以看到您有一个未定义的变量：theForm。我想它应该是你的HTML表单，除了页面中没有。没问题，您可以使用其ID：

到达"motor"元素

var selectedHP = document.getElementById("motor");

你的第二个最好的盟友是strict mode几乎没有任何成本 - 在你的剧本开头添加一个字符串'use strict'; - 并显示更多错误。

将我的建议添加到pritesh agrawal的一个，你应该让你的代码运行。最后一个建议：当您不需要解析HTML代码时，请使用textContent而不是innerHTML。当您需要解析HTML代码时，请不要使用innerHTML。 insertAdjacentHTML在任何情况下都更有效率。

Answer 2

你可以尝试下面的

删除回报（我无法理解为什么它有第一名。）

document.getElementById("demo").textContent = kw;

请同时阅读以上记者，下面是工作代码：

<!DOCTYPE html>
<html>
<body>
<fieldset class="Desired">
<legend>Input Supply:</legend>
<center>
<div class="form">
<p><b>Motor(HP):</b></p>
 <form action="/action_page.php" id= "motork">
    <select id="motor" name="motor">
            <option value="24">24</option>
            <option value="30">30</option>
            <option value="60">60</option>
    </select>
 </form>
</div>
</center>
<center>
<br>
<input onclick="converttokw()" type="button" value="Calculate" class="btn1" > 
</center>

<p id="demo"></p>
</fieldset>
<script>
    var motorsize= new Array();
    motorsize["24"]=24;
    motorsize["30"]=30;
    motorsize["60"]=60;

 function converttokw() {
        var kw=0;
        var HP= document.forms["motork"];
        var selectedHP = HP.elements["motor"];
        kw = motorsize[selectedHP.value]*746;
  document.getElementById("demo").innerHTML = kw
}

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

Answer 3

以下是完全更正的副本。保持变量名称一致。您根本不需要电机阵列，因为JavaScript非常乐意将"24"（字符串）强制转换为乘法数字。也：

查看CSS，<centre>已过时，<b>不适合制作标题。
如果可能，请将<script>标记放在<head>标记中。
我确保您的HTML标记正确嵌套，这很重要。

<!DOCTYPE html>
<html>

  <body>
    <fieldset class="Desired">
      <legend>Input Supply:</legend>
      <center>
        <div class="form">
          <h3>Motor(HP):</h3>
          <form id="motork">
            <select id="motor" name="motor">
              <option value="24">24</option>
              <option value="30">30</option>
              <option value="60">60</option>
            </select>
          </form>
        </div>

        <br>
        <input onclick="converttokw()" type="button" value="Calculate" class="btn1">

        <p id="demo"></p>
      </center>
    </fieldset>

    <script>
      function converttokw() {
        var kw = 0;
        var HP = document.getElementById("motor");
        kw = HP.value * 746;
        document.getElementById("demo").innerHTML = kw;
      }

    </script>
  </body>

</html>

Answer 4

我已经修复了将HP转换为KW的功能。

function converttokw() {
  var selector = document.getElementById("motor");
  var HP = selector.options[selector.selectedIndex].value;
  var KW = HP * 746;
  var paragraph = document.getElementById("demo");
  paragraph.innerHTML = KW;
}

说明：

首先，我选择ID为<select>

motor

然后，我从<select>元素
然后，我使用你的forumala
然后，我选择ID为demo
最后，我将它的内部HTML改为转换后的KW。

Answer 5

 <fieldset class="Desired">
  <legend>Input Supply:</legend>
  <center>
    <div class="form">
      <p><b>Motor(HP):</b></p>
      <form action="/action_page.php" id="motork">
        <select id="motor" name="motor">
          <option value="24">24</option>
          <option value="30">30</option>
          <option value="60">60</option>
        </select>
      </form>
    </div>

    <center>
      <br>
      <input onclick="converttokw()" type="button" value="Calculate" class="btn1">
    </center>

    <p id="demo"></p>

    <script>
      function converttokw() {
        var kw = 0;
        var e = document.getElementById("motor");
        var HP=e.options[e.selectedIndex].value;
        kw = HP* 746;
        document.getElementById("demo").innerHTML = kw
      }

    </script>

See it in codepen

编码简单的HTML文件？

5 个答案: