Javascript 编写简单的HTML文件？_Javascript_Html

Javascript 编写简单的HTML文件？

javascript html

Javascript 编写简单的HTML文件？,javascript,html,Javascript,Html,有人能帮我吗。我不熟悉java和HTML，但我试着制作一个简单的应用程序，从电机尺寸下拉列表中获取输入，并将它们从HP转换为KW。我无法打印结果。我没有主意了，下面是我的小代码 <!DOCTYPE html> <html> <body> <fieldset class="Desired"> <legend>Input Supply:</legend> <center> <div c

有人能帮我吗。我不熟悉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>


输入电源：
电机（HP）：
24
30
60



var motorsize=新数组（）；
电机[“24”]=24；
电机[“30”]=30；
电机[“60”]=60；
函数converttokw（）{
var-kw=0；
var HP=document.forms[“motork”]；
var selectedHP=形式元素[“电机”]；
kw=电机尺寸[选择的HP.值]*746；
返回千瓦；
document.getElementById（“demo”）.innerHTML=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>


输入电源：
电机（HP）：
24
30
60



var motorsize=新数组（）；
电机尺寸[“24”]=24；
电机尺寸[“30”]=30；
电机尺寸[“60”]=60；
函数converttokw（）{
var-kw=0；
var HP=document.forms[“motork”]；
var selectedHP=HP。元件[“电机”]；
kw=电机尺寸[选择的HP.值]*746；
document.getElementById（“demo”）.innerHTML=kw
}

以下是一份完全更正的副本。保持变量名的一致性。您根本不需要motor数组，因为JavaScript非常乐意将字符串

“24”

强制转换为一个数字进行乘法。此外：

看看CSS，
已经过时，
不适合制作标题
如果可能，将
标签放入
标签中
我已确保HTML标记正确嵌套，这一点很重要


输入电源：
电机（HP）：
24
30
60



函数converttokw（）{
var-kw=0；
var HP=document.getElementById（“马达”）；
千瓦=HP.value*746；
document.getElementById（“demo”）.innerHTML=kw；
}

、No、No
仅用于垂直间距时–您不使用HTML样式。您可以使用CSS进行样式设置。但是你有足够的时间去学习
Java是旧的Sun技术，过去它通过小程序在网页上运行。现在它被用来制作智能手机软件。但在浏览器中，它是一种完全不同的语言，叫做JavaScript。不要混淆
现在针对您的问题，首先打开您最好的盟友：控制台。钥匙是F12。控制台将显示脚本中的错误（如果有），以及通过调用console.log
记录的消息
使用新朋友控制台，您已经可以看到有一个未定义的变量：theForm
。我想它应该是你的HTML表单，除非你的页面中没有。没问题，您可以使用其id访问“motor”
元素：
var selectedHP = document.getElementById("motor");

你的第二个最好的盟友是几乎不花钱的——添加一个字符串'use strict'在脚本开头–并显示更多错误
将我的建议添加到pritesh agrawal的建议中，您应该运行代码。
最后一个建议是：当不需要解析HTML代码时，使用textContent
而不是innerHTML
。当需要解析HTML代码时，不要使用innerHTML
。在任何情况下都更有效。

 <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>

输入电源：
电机（HP）：
24
30
60



函数converttokw（）{
var-kw=0；
var e=document.getElementById（“马达”）；
var HP=e.options[e.selectedIndex]。值；
千瓦=马力*746；
document.getElementById（“demo”）.innerHTML=kw
}

我已经为您修复了将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为电机的
元素

然后，我从
元素中获取所选项目
然后，我使用你的forumala将千瓦转换为马力
然后，我选择ID为demo
最后，我将其内部HTML更改为转换后的KWs
Java不是Javascript在converttokw（）中返回值后，不会对该函数执行任何其他操作，因此变量名会不断更改，例如，motor
和motorsize
看起来应该是相同的。缩短：这里最重要的一课是要确切地认识到数组是多么无意义。假设您想将五个字符串转换为一个数字。或者十个。你坐在电脑前。你有多大可能需要手工完成…？我已经删除了返回，并用上面的行替换了现有行，仍然不会显示。请尝试使用我提供的代码，它对我来说很好，你的HTML格式很差，我在function@Watlin，您已链接到法国MDN，可能一个英文链接更好吗？非常好的回答。顺便说一句，
元素已经过时：@Rob谢谢！现在已修复。您错过了一个。@Rob
不是过时的，只是在许多情况下强烈反对。我猜这就是你的意思？我是说你错过了一个中间的标签。关于
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;
}