HTML onclick按钮未调用javascript函数

Question

My HTML: 我的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>

My Javascript: 我的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;
    };

What am I missing? 我想念什么？ Everything validates yet I can't get it to run in any browser. 一切都经过验证，但我无法使其在任何浏览器中运行。 I'm sure it must be something obvious, however, I have looked at this code and played with it all day and I'm just lost and very frustrated. 我确定它一定很明显，但是，我整天都在看这段代码并一直使用它，我迷路了，非常沮丧。 Any help would be great. 任何帮助都会很棒。

Answer 1

Multiple issues with your code 您的代码存在多个问题

It should be var total instead of total 应该是var total而不是total
Elements like A, B, C and Total which you are referencing in your code are missing 您在代码中引用的元素A，B，C和Total丢失
You need to convert the values to number as well. 您还需要将值转换为数字。

Demo 演示版

 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>

Answer 2

Because variable total is undefined . 因为变量total是undefined 。 Make sure your total var is something like var total And in addition to that 确保您的总var类似于var total ，除此之外

There should be elements with Id's A,B,C,Total somewhere in document , As you are doing some operation on DOM which isn't in DOM . 应该有elements with Id's A,B,C,Total在文档的某个地方，当你正在做一些操作DOM这是不是在DOM 。
parseInt() if u want to add numbers otherwise it was ok. parseInt()如果您想添加数字，否则还可以。 Hope this will work. 希望这会起作用。

 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>

Answer 3

干得好：

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

Answer 4

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

HTML onclick按钮未调用javascript函数

问题描述

4 个解决方案

解决方案1
3 2017-12-08 06:40:49

解决方案2
1 2017-12-08 06:38:18

解决方案3
0 2017-12-08 06:37:38

解决方案4
0 2017-12-08 06:48:17

HTML onclick按钮未调用javascript函数

问题描述

4 个解决方案

解决方案1 3 2017-12-08 06:40:49

解决方案2 1 2017-12-08 06:38:18

解决方案3 0 2017-12-08 06:37:38

解决方案4 0 2017-12-08 06:48:17

解决方案1
3 2017-12-08 06:40:49

解决方案2
1 2017-12-08 06:38:18

解决方案3
0 2017-12-08 06:37:38

解决方案4
0 2017-12-08 06:48:17