Question

我想制作一个网页，当您点击时，它会添加一个点。我也想要，当选中A复选框时，每次点击都会增加5个点。我尝试了这段代码，但它似乎没有起作用：

    <!DOCTYPE html>
    <html>
        <head>
        <title>Click to add points!</title>
        <script type="text/javascript">
        var hey = 3;
        var points = 0;
        function addPoint(number)
        {   
        points = points + number;
        document.getElementById("points").innerHTML = points;
        };  
        function checkBox()
        {
        var chkBox = document.getElementById("extraPoints").checked;
        }
        </script>
        </head>
        <html onclick="
        checkBox();
        if (chkBox == true)
        {
        addPoint(5);
        }
        else
        {
        addPoint(1);
        }">
        <body>
        <p align="center">Points: <span id="points">0</span></p>
        <p align="center"><input type="checkbox" id="extraPoints" /></p>
        <p id="writeHere"></p>
        </body>
    </html>

我还想指出我不能使用jQuery。提前谢谢。

Answer 1

您可以在checkBox内移动添加部分。

＆＃13;

function addPoint(number) {
    points = points + number;
    document.getElementById("points").innerHTML = points;
};

function checkBox() {
    var chkBox = document.getElementById("extraPoints").checked;
    addPoint(chkBox ? 5 : 1); 
}

var hey = 3;
var points = 0;

＆＃13;

<html onclick="checkBox();">
<p align="center">Points: <span id="points">0</span></p>
<p align="center"><input type="checkbox" id="extraPoints" /></p>
<p id="writeHere"></p>

＆＃13;

Answer 2

使用以下方法。

注意：您可以根据需要调整添加的点数。

＆＃13;

var points = 0, //initial value 
    elem = document.getElementById('points'), //get span holding the value
    box = document.getElementById('extraPoints'); //get the checkbox

    document.addEventListener('click', function(){ //add click event on whole document
       box.checked ? points += 5 : points += 1 //if checkbox checked, add +5 - if not, add +1
       elem.innerHTML = points; //actualize the value in the span
    });

＆＃13;

<p align="center">Points: <span id="points">0</span></p>
<p align="center"><input type="checkbox" id="extraPoints" /></p>
<p id="writeHere"></p>

＆＃13;

需要有关基本HTML和JavaScript项目的帮助

2 个答案: