在HTML中使用javascript函数_Javascript

在HTML中使用javascript函数

javascript

在HTML中使用javascript函数,javascript,Javascript,我正在创建一个小网页，将两个输入字段添加到一起，并将结果放在另一个输入字段中。这就是我所拥有的： <html> <head> <title>Calculator</title> <script type="text/javascript"> function add(){ var num1 = parseInt(document.calc.num1.value);

我正在创建一个小网页，将两个输入字段添加到一起，并将结果放在另一个输入字段中。这就是我所拥有的：

<html>
<head>
    <title>Calculator</title>

    <script type="text/javascript">
        function add(){
            var num1 = parseInt(document.calc.num1.value);
            var num2 = parseInt(document.calc.num2.value);
            var answer = (num1+num2);
            document.getElementById('res').value = answer;
        }
    </script>
</HEAD>

<BODY>
    <FORM NAME="calc">
        <INPUT TYPE ="button" NAME="add" Value="+" onClick="add()">
        <hr/>
        <INPUT TYPE ="text" NAME="num1" Value="">
        <INPUT TYPE ="text" NAME="num2" Value="">  
        <hr/>
        <INPUT TYPE ="text" ID="res" NAME="result" VALUE="">
    </FORM>
</BODY>
</HTML>

onclick是处理单击的正确属性

将此位切换到

onclick="add()"

尝试将函数名从add更改为addNumbers或类似的内容。

问题在于函数名“add（）”，更改名称后，您将看到它将正常工作

HTML

<p>
    <label for="field1">Field 1</label>
    <input type="number" id="field1"/>
</p>
<p>
    <label for="field2">Field 2</label>
    <input type="number" id="field2"/>
</p>
<p>
    <label for="total">Total</label>
    <input readonly type="number" id="total"/>
</p>
<p>
    <input type="button" id="calc" value="Calculate"/>
</p>

不HTML属性不区分大小写。正如@SLaks所提到的，将单击更改为小写并不能解决问题。我建议可以缓解问题的一件事是选择大小写（大写或小写），并坚持使用它。大多数浏览器更喜欢使用小写字母表示元素。想想：太棒了！我想问题是因为我的函数和按钮名是一样的？将函数名更改为addNumbers解决了这个问题。谢谢<代码>在引用元素的处理程序中添加。是的。你也看到这个问题了。性能文章倾向于“建议”您将尽可能多的JS放在文档的底部/页脚。在我们进行此操作时，不妨开始返回到

document.write（）

，因为这样速度更快。对不起，这还是个坏习惯。

onclick="add()"

<p>
    <label for="field1">Field 1</label>
    <input type="number" id="field1"/>
</p>
<p>
    <label for="field2">Field 2</label>
    <input type="number" id="field2"/>
</p>
<p>
    <label for="total">Total</label>
    <input readonly type="number" id="total"/>
</p>
<p>
    <input type="button" id="calc" value="Calculate"/>
</p>

function sumFields(fields) {
    var total = 0;

    // goes through each field and adds them to the total
    for(var i=0,l=fields.length; i<l; i++)
        { total += parseInt(document.getElementById(fields[i]).value); }

    document.getElementById('total').value = total;
}

function calc_click() {
    // runs when the button is clicked
    sumFields(['field1','field2']);
}

// main function
function init() {
    // add button functionality
    document.getElementById('calc').addEventListener('click',calc_click,false);
}

// fires when the DOM is loaded
document.addEventListener('DOMContentLoaded',init,false);