HTML onclick按钮不调用javascript函数

时间:2017-12-08 06:35:14

标签: javascript html html5 function

我的HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="scorecard.js"></script>
</head>
<body>
    <div id="scoreButton"><button onclick="javascript: scorecard();">Calculate Score</button></div>
</body>
</html>

我的Javascript:

var a;
var b;
var c;
total;

var scorecard = function() 
    {
    a = prompt("What was your score on a?","A");
    b = prompt("What was your score on b?","B");
    c = prompt("What was your score on c?","C");
    total = (a + b + c);
    document.getElementById("A").innerHTML = a;
    document.getElementById("B").innerHTML = b;
    document.getElementById("C").innerHTML = c;
    document.getElementById("Total").innerHTML = total;
    };

我错过了什么?一切都验证了我无法在任何浏览器中运行它。我确定它一定是显而易见的东西,然而,我已经看过这段代码并且整天玩它并且我只是迷失并且非常沮丧。任何帮助都会很棒。

4 个答案:

答案 0 :(得分:3)

您的代码存在多个问题

  • 应该是var total而不是total
  • 缺少您在代码中引用的A,B,C和Total等元素
  • 您还需要将值转换为数字。

<强>演示

var a;
var b;
var c;
var total;

var scorecard = function() {
  a = +prompt("What was your score on a?", "A");
  b = +prompt("What was your score on b?", "B");
  c = +prompt("What was your score on c?", "C");
  total = (a + b + c);
  document.getElementById("A").innerHTML = a;
  document.getElementById("B").innerHTML = b;
  document.getElementById("C").innerHTML = c;
  document.getElementById("Total").innerHTML = total;
};
A : <div id="A"></div> <br>
B : <div id="B"></div> <br>
C : <div id="C"></div> <br>

Total : <div id="Total"></div> <br>
<div id="scoreButton"><button onclick="javascript: scorecard();">Calculate Score</button></div>

答案 1 :(得分:1)

因为变量totalundefined。确保您的总变量类似var total以及

  • 文档中某处应该有elements with Id's A,B,C,Total,因为您正在DOM上执行某项操作,而DOM不在parseInt()
  • var a; var b; var c; var total; var scorecard = function() { a = parseInt(prompt("What was your score on a?","A"));//parseInt() if u want to add numbers otherwise it was ok. b = parseInt(prompt("What was your score on b?","B")); c = parseInt(prompt("What was your score on c?","C")); total = (a + b + c); document.getElementById("A").innerHTML = a; //There should be elements with Id's A,B,C,Total somewhere in document. document.getElementById("B").innerHTML = b; document.getElementById("C").innerHTML = c; document.getElementById("Total").innerHTML = total; };如果你想添加数字,否则就可以了。 希望这会奏效。

<div id="scoreButton"><button onclick="javascript: scorecard();">Calculate Score</button></div>
 <div id = "A"></div> 
  <div id = "B"></div>
   <div id = "C"></div>
    <div id = "Total"></div>
xtabs(trade_value_usd ~ year + commodity_code, data = df);
#year          29        73
#  2012 150863100 100484600
#  2013 151614000         0
#  2014  73110200         0
#  2015 140396300         0
#  2016 135311600         0

答案 2 :(得分:0)

你去:

<div id="scoreButton"><button onclick="scorecard()">Calculate Score</button></div>    // I have changed syntax of onclick. 

答案 3 :(得分:0)

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
    <script>
        var a;
        var b;
        var c;
        var total;

        function scorecard()
        {

            a = prompt("What was your score on a?", "A");
            b = prompt("What was your score on b?", "B");
            c = prompt("What was your score on c?", "C");
            total = (a + b + c);
            document.getElementById("A").innerHTML = a;
            document.getElementById("B").innerHTML = b;
            document.getElementById("C").innerHTML = c;
            document.getElementById("Total").innerHTML = total;
        };
    </script>
</head>
<body>
     <div id="scoreButton"><button onclick="scorecard()">Calculate Score</button></div>
     <h3 id="A"></h3>
     <h3 id="B"></h3>
     <h3 id="C"></h3>
</body>