使用JavaScript提交HTML，提交按钮

问题描述：

我正在尝试编写一个简单的小部件来衡量Net Promoter Score。这是我到目前为止：使用JavaScript提交HTML，提交按钮

<!DOCTYPE html> 
<html> 
<body> 
<link type="text/css" rel="stylesheet" href="NPSstyle.css"/> 
    <h1>Net Promoter Score<h1> 
     <p class="question">How likely are you to recommend this tool to a friend or colleague?</p> 
<form id="myForm"> 

    <button type="button" id="button1">1</button> 
    <button type="button" id="button2">2</button> 
    <button type="button" id="button3">3</button> 
    <button type="button" id="button4">4</button> 
    <button type="button" id="button5">5</button> 
    <button type="button" id="button6">6</button> 
    <button type="button" id="button7">7</button> 
    <button type="button" id="button8">8</button> 
    <button type="button" id="button9">9</button> 
    <button type="button" id="button10">10</button> 
    <button type="submit" class="input submit">Submit</button> 
</form> 
<p class="explanation">Not likely............................................................Very likely</p> 


<script> 

var userRating 

document.getElementById('button1').onclick = function() { 
    console.log(this.id + " was clicked") 
    userRating = 1; 
} 
document.getElementById('button2').onclick = function() { 
    console.log(this.id + " was clicked") 
    userRating = 2; 
} 
document.getElementById('button3').onclick = function() { 
    console.log(this.id + " was clicked") 
    userRating = 3; 
} 
document.getElementById('button4').onclick = function() { 
    console.log(this.id + " was clicked") 
    userRating = 4; 
} 
document.getElementById('button5').onclick = function() { 
    console.log(this.id + " was clicked") 
    userRating = 5; 
} 
document.getElementById('button6').onclick = function() { 
    console.log(this.id + " was clicked") 
    userRating = 6; 
} 
document.getElementById('button7').onclick = function() { 
    console.log(this.id + " was clicked") 
    userRating = 7; 
} 
document.getElementById('button8').onclick = function() { 
    console.log(this.id + " was clicked") 
    userRating = 8; 
} 
document.getElementById('button9').onclick = function() { 
    console.log(this.id + " was clicked") 
    userRating = 9; 
} 
document.getElementById('button10').onclick = function() { 
    console.log(this.id + " was clicked") 
    userRating = 10; 
} 


</script>

我目前正试图弄清楚如何获得提交工作。我希望用户按下代表他们分数的按钮，然后按提交以注册他们的分数。现在，我只希望他们的分数在提交时显示在控制台中，但最终会被保存到服务器，这只是一个在浏览器中弹出屏幕的小部件。我开始在真空中做这件事来帮助自己学习。我希望有人指出我正确的方向或给我一个提示。这是我第一次尝试JavaScript，所以我仍然在学习。谢谢！

你的问题的信息不够详细。分数如何登记？你需要将分数提交给服务器吗？你想触发一个页面加载，或者你想要在后台发生？等 – Comptonburger

我刚刚编辑我的问题更清楚，对不起！ – Spance

为什么你不使用单选按钮进行选择？ – Barmar

答

以与将onclick处理程序添加到按钮的相同方式，您可以将onsubmit处理程序添加到窗体。

document.getElementById('myForm').onsubmit = function() { 
    console.log(userRating); 
}

使用JavaScript提交HTML，提交按钮

相关推荐