基本的なHTMLおよびJavaScriptプロジェクトのヘルプが必要

クリックするとポイントを追加するWebページを作成したいと思います。また、チェックボックスをオンにすると、クリックするたびに5ポイントが加算されます。このコードを試しましたが、動作していないようです：基本的なHTMLおよびJavaScriptプロジェクトのヘルプが必要

<!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を使用できないことを指摘したいと思います。ありがとうございます。

出典

2017-03-17 Diogo SCF

checkBoxの内部で追加部分を移動することができます。アプローチ以下

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;

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

出典

2017-03-17 22:01:09

あなたは私をたくさん助けました！ありがとうございました！ –

使用。

注：追加したポイントを自由に調整できます。

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 
 
    });

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

出典

2017-03-17 22:01:39

基本的なHTMLおよびJavaScriptプロジェクトのヘルプが必要

答えて

関連する問題