显示讯息

我正在使用HTML和Java Script的新安全评估网页。出于某种原因，代码无法正常工作。页面应该工作的方式是让用户回答是或否问题，当用户完成后点击提交。然后，页面会显示回答“是”的问题数量，如果用户通过或未通过评估，则会显示一条消息。但是当我点击提交时，我只能看到结果，而不是消息。显示讯息

任何反馈将不胜感激。

function sumInputs() { 
 
    var text; 
 
    var score = document.getElementById("total").value; 
 

 
    if (score < 60) { 
 
    text = "You have failed the Assessment"; 
 
    } else(score > 60) { 
 
    text = "You have passed the Assessment"; 
 
    } 
 

 
    document.getElementById("demo").innerHTML = text; 
 
} 
 

 
function calcscore() { 
 
    var score = 0; 
 
    $(".calc:checked").each(function() { 
 
    score += parseInt($(this).val(), 10); 
 
    }); 
 
    $("input[name=sum]").val(score) 
 
} 
 

 
$().ready(function() { 
 
    $(".calc").change(function() { 
 
    calcscore() 
 

 
    }); 
 
}); 
 

 
window.sumInputs = function() { 
 
    var inputs = $('.calc:checked'), 
 
    result = document.getElementById('total'), 
 
    sum = 0; 
 

 
    for (var i = 0; i < inputs.length; i++) { 
 
    sum += parseInt(inputs[i].value); 
 
    } 
 

 
    $('#total').val(sum); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
<body> 
 
    <p id="demo"></p> 
 
    <h1>Security Assessment </h1> 
 

 
    <table> 
 
    <tr> 
 
     <th>PERSONNEL SECURITY</th> 
 
    </tr> 
 
    <tr> 
 
     <td>1. Does your staff wear ID badges? 
 
     <form> 
 
      Yes 
 
      <input class="calc" type="radio" name="radio1" value="1" /> No 
 
      <input class="calc" type="radio" name="radio1" value="0" /><br /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>2. Is a current picture part of the ID badge? Yes 
 
     <input class="calc" type="radio" name="radio2" value="1" /> No 
 
     <input class="calc" type="radio" name="radio2" value="0" /><br /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>3. Are authorized access levels and type (employee, contractor, visitor) identified on the Badge? Yes 
 
     <input class="calc" type="radio" name="radio3" value="1" /> No 
 
     <input class="calc" type="radio" name="radio3" value="0" /><br /> 
 
     </form> 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 
    Total : <input type="text" name="total" id="total" /> 
 

 
    <input type="Submit" value="Submit" onclick="sumInputs()"> 
 
</body> 
 
</html>

来源

2017-07-26 SHO

为什么有问题时？ – guest271314

我就开始固定的语法错误两个HTML文档，看看您的控制台。 – empiric

检查，如果这个工程。另外，请检查您的变量类型

function calcscore() { 
 
    var score = 0; 
 
    $(".calc:checked").each(function() { 
 
     score += parseInt($(this).val(), 10); 
 
    }); 
 
    $("input[name=sum]").val(score) 
 
} 
 
    
 
    
 
$().ready(function() { 
 
    $(".calc").change(function() { 
 
     calcscore() 
 
    }); 
 
}); 
 

 

 

 
    
 
function sumInputs() { 
 
    var inputs = $('.calc:checked'), 
 
     result = document.getElementById('total'), 
 
     sum = 0; 
 

 
    for (var i = 0; i < inputs.length; i++) { 
 
     sum += parseInt(inputs[i].value); 
 
    } 
 

 
    $('#total').val(sum); 
 

 
    var text, score = document.getElementById("total").value; 
 

 
    if (score < 60) { 
 
     text = "You have failed the Assessment"; 
 
    } else if(score > 60) { 
 
     text = "You have passed the Assessment"; 
 
    } 
 

 
    document.getElementById("demo").innerHTML = text; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
\t 
 
\t \t <body> 
 

 
\t \t <h1>Security Assessment </h1> 
 

 
\t <table> 
 
    <tr> 
 
    <th>PERSONNEL SECURITY</th> 
 
    
 
    </tr> 
 
    <tr> 
 
    <td>1. Does your staff wear ID badges? 
 

 
<form> 
 
Yes 
 
<input class="calc" type="radio" name="radio1" value="1" /> 
 
No 
 
<input class="calc" type="radio" name="radio1" value="0" /><br /> 
 

 
</form> 
 

 

 
</td> 
 

 
    
 
    </tr> 
 
    <tr> 
 
    <td>2. Is a current picture part of the ID badge? 
 

 

 
<form> 
 
Yes 
 
<input class="calc" type="radio" name="radio2" value="1" /> 
 
No 
 
<input class="calc" type="radio" name="radio2" value="0" /><br /> 
 

 
</form> 
 

 

 
</td> 
 
    
 
    
 
    </tr> 
 
    <tr> 
 
    <td>3. Are authorized access levels and type (employee, contractor, visitor) identified 
 
on the Badge? 
 

 
<form> 
 
Yes 
 
<input class="calc" type="radio" name="radio3" value="1" /> 
 
No 
 
<input class="calc" type="radio" name="radio3" value="0" /><br /> 
 

 
</form> 
 

 
</td> 
 
     
 
    </tr> 
 
    
 
    
 
</table> 
 

 
Total : <input type="text" name="total" id="total"/> 
 

 

 

 
<input type="Submit" value="Submit" onclick="sumInputs()"> 
 

 
<p id="demo"></p> 
 
</body> 
 
</html>

来源

2017-07-26 13:51:15

请说明究竟你改变。 –

@winDither感谢您的帮助。现在我可以看到信息，但不是评估的结果。 – SHO

你有两个功能，一个名为sumInputs;第二个（填充'分数'字段）覆盖第一个（应该输出该消息）

此外，评分试图基于百分比，但从未计算出百分比，只是一个计数正确的问题。

（也有一对夫妇的语法错误在这里和那里。）

通过合并这两个sumInputs函数的结果在纠正所有这些：

function calcscore() { 
 
    var score = 0; 
 
    $(".calc:checked").each(function() { 
 
    score += parseInt($(this).val(), 10); 
 
    }); 
 
    $("input[name=sum]").val(score) 
 
} 
 

 
$().ready(function() { 
 
    $(".calc").change(function() { 
 
    calcscore() 
 
    }); 
 
}); 
 

 
window.sumInputs = function() { 
 
    var inputs = $('.calc:checked'), 
 
    result = document.getElementById('total'), 
 
    sum = 0; 
 

 
    for (var i = 0; i < inputs.length; i++) { 
 
    sum += parseInt(inputs[i].value); 
 
    } 
 

 
    $('#total').val(sum); 
 
    
 
    var score = sum/3 * 100; // calculate percentage 
 

 
    if (score < 60) { 
 
    text = "You have failed the Assessment"; 
 
    } else { // no need for else if (score > 60)... which would have failed if the score was exactly 60 
 
    text = "You have passed the Assessment"; 
 
    } 
 
    document.getElementById("demo").innerHTML = text; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
<body> 
 
    <p id="demo"></p> 
 
    <h1>Security Assessment </h1> 
 

 
    <table> 
 
    <tr> 
 
     <th>PERSONNEL SECURITY</th> 
 
    </tr> 
 
    <tr> 
 
     <td>1. Does your staff wear ID badges? 
 
     <form> 
 
      Yes 
 
      <input class="calc" type="radio" name="radio1" value="1" /> No 
 
      <input class="calc" type="radio" name="radio1" value="0" /><br /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>2. Is a current picture part of the ID badge? Yes 
 
     <input class="calc" type="radio" name="radio2" value="1" /> No 
 
     <input class="calc" type="radio" name="radio2" value="0" /><br /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>3. Are authorized access levels and type (employee, contractor, visitor) identified on the Badge? Yes 
 
     <input class="calc" type="radio" name="radio3" value="1" /> No 
 
     <input class="calc" type="radio" name="radio3" value="0" /><br /> 
 
     </form> 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 
    Total : <input type="text" name="total" id="total" /> 
 

 
    <input type="Submit" value="Submit" onclick="sumInputs()"> 
 
</body> 
 

 
</html>

顺便说一句， calcscore()函数是不必要的 - 它在用户参加测验时更新显示的分数，但测验末尾使用的sumInputs函数不依赖于它。如果你不想让用户立即反馈每个问题是否正确，你可以删除该功能（并将$("input[name=sum]").val(score)转换为sumInputs()。

来源

2017-07-26 14:13:02

我添加了一些已经完成的修改，并将纯javascript改为jQuery的。

$('.calc').change(function() { 
 
    calcscore();    
 
}); 
 

 
$('#submitted').click(function() { 
 

 
    sumInputs(); 
 
    result(); 
 

 
}); 
 

 
function sumInputs() { 
 

 
    var inputs = $('.calc:checked'), 
 
     result = $('#total').val(), 
 
     sum = 0; 
 

 
    for (var i = 0; i < inputs.length; i++) { 
 
     sum += parseInt(inputs[i].value); 
 
    } 
 

 
    $('#total').val(sum); 
 

 
} 
 

 
function result() { 
 

 
    var text; 
 
    var score = (($('#total').val())/3) * 100; 
 
    var score = score.toFixed(2);    
 

 
    if (score < 60) { 
 
     text = "Total " + score + ": You have failed the Assessment"; 
 
    } 
 
    else {    
 
     text = "Total " + score + ": You have passed the Assessment"; 
 
    } 
 

 
    $('#demo').text(text); 
 
} 
 

 
function calcscore() { 
 

 
    var score = 0; 
 

 
    $('.calc:checked').each(function() {     
 
     score += parseInt($(this).val(), 10); 
 
    }); 
 

 
    $('#total').val(score); 
 

 
}

<html> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <h1>Security Assessment </h1> 
 

 
    <form>   
 
    <table> 
 
     <tr> 
 
      <th>PERSONNEL SECURITY</th> 
 
     </tr> 
 
     <tr> 
 
      <td>1. Does your staff wear ID badges? 
 
       Yes <input class="calc" type="radio" name="radio1" value="1" /> 
 
       No <input class="calc" type="radio" name="radio1" value="0" /><br /> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>2. Is a current picture part of the ID badge? 
 
       Yes <input class="calc" type="radio" name="radio2" value="1" /> 
 
       No <input class="calc" type="radio" name="radio2" value="0" /><br /> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>3. Are authorized access levels and type (employee, contractor, visitor) identified on the Badge? 
 
       Yes <input class="calc" type="radio" name="radio3" value="1" /> 
 
       No <input class="calc" type="radio" name="radio3" value="0" /><br /> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
    </form> 
 

 
    Total : <input type="text" name="total" id="total" /> 
 
    <input id="submitted" type="Submit" value="Submit"><br><br> 
 
    <p id="demo"></p> 
 
    
 
</body> 
 
</html>

来源

2017-07-27 17:16:40

回答

相关问题