Javascript警报功能在单击按钮后不显示消息

遇到单击按钮后无法显示警报的问题。我已经根据提出的建议编辑了以前的代码，但仍然没有显示警报。关于这个问题可能是什么还有其他想法吗？我感谢大家的帮助。

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link href='https://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet'>
<meta charset="utf-8">
<title>Pizzeria</title>
<style type="text/css">
body {
margin: 40px;
font-family: 'Open Sans';
}
#fieldSize, #fieldCrust {
width: 150px;
float: left;
border: none;
}
#fieldToppings {
width: 350px;
border: none;
}
fieldset {
margin-top: 20px;
}
#toppings1 {
float: left;
}
label {
display: inline-block;
width: 150px;
margin: 7px;
text-align: left;
}
input[type="text"] {
width: 250px;
}
div {
padding: 10px;
}
#btnOrder {
width: auto;
border-radius: 10px;
}
</style>
<script type="text/javascript">
function orderSubmit() {
var name = document.getElementById("txtName").value;
var phone = document.getElementById("txtPhone").value;
phone = '(' + phone.substring(0,3) + ')' + phone.substring(3,6) + '-' + phone.substring(6);
var address = document.getElementById("txtAddress").value;
var msg = name + ", your order is being prepared. n";
msg+= "Your order will be delivered at " + address;
msg+= "Your contact infromation is: " + phone "n";
msg+= "Order details: n n";

for(var i = 0; i < document.frm1.rdoSize.length; i++) {
if(document.frm1.rdoSize[i].checked) {
var radioStateSize = document.frm1.rdoSize[i].value;
}
}
for(var j = 0; j < document.frm1.rdoCrust.length; j++) {
if(document.frm1.rdoCrust[j].checked) {
var radioStateCrust = document.frm1.rdoCrust[j].value;
}
}
msg+= radioStateSize + ' ' + radioStateCrust + " pizza with the following toppings: n";
var chkToppings = document.frm1.chkToppings;
for(k=0; k < document.frm1.chkToppings; k++) {
if(document.frm1.chkToppings[k].checked) {
msg += document.frm1.chkToppings[k].value + ' ';
}
}
alert(msg);
}
</script>
</head>
<body>
<fieldset id="main">
<legend><h2>Pizza Order!</h2></legend>
<form name="frm1">
<div>
<label for="lblName">Name:</label>
<input type="text" id="txtName">
</div>
<div>
<label for="lblPhone">Phone Number:</label>
<input type="text" id="txtPhone">
</div>
<div>
<label for="lblAddress">Address:</label>
<input type="text" id="txtAddress">
</div>
<fieldset id="fieldSize">
<legend><strong>Size</strong></legend>
<input type="radio" name="rdoSize" value="Small" id="rdoSmall"> Small <br>
<input type="radio" name="rdoSize" value="Medium" id="rdoMedium"> Medium <br>
<input type="radio" name="rdoSize" value="Large" id="rdoLarge"> Large <br>
</fieldset>
<fieldset id="fieldCrust">
<legend><strong>Crust</strong></legend>
<input type="radio" name="rdoCrust" value="Thin" id="rdoThin"> Small <br>
<input type="radio" name="rdoCrust" value="HandTossed" id="rdoHandTossed"> Hand Tossed <br>
<input type="radio" name="rdoCrust" value="GF" id="rdoGF"> Gluten Free <br>
</fieldset>
<fieldset id="fieldToppings">
<legend><strong>Toppings</strong></legend>
<div id="toppings1">
<input type="checkbox" name="chkToppings" id="chkPepperoni" value="Pepperoni"> Pepperoni <br>
<input type="checkbox" name="chkToppings" id="chkSausage" value="Sausage"> Sausage <br>
<input type="checkbox" name="chkToppings" id="chkChourico" value="Chourico"> Pepperoni <br>
<input type="checkbox" name="chkToppings" id="chkChicken" value="Chicken"> Chicken <br>
<input type="checkbox" name="chkToppings" id="chkAnchovies" value="Anchovies"> Anchovies <br>
</div>
<div id="toppings2">
<input type="checkbox" name="chkToppings" id="chkMushrooms" value="Mushrooms"> Mushrooms <br>
<input type="checkbox" name="chkToppings" id="chkPeppers" value="Peppers"> Peppers <br>
<input type="checkbox" name="chkToppings" id="chkFeta" value="Feta"> Feta <br>
<input type="checkbox" name="chkToppings" id="chkOlives" value="Olives"> Olives <br>
<input type="checkbox" name="chkToppings" id="chkOnions" value="Onions"> Onions <br>
</div>
</fieldset>
<input type="button" id="btnOrder" value="Order" onclick="orderSubmit()">
</form>
</fieldset>
</body>
</html>

在您发布的示例中，存在一些拼写错误和语法错误，您可能需要先检查一下。您可以检查使用控制台的控制台(在某些浏览器中：Ctrl-i)，这对于调试BTW总是很有用。正如其他答案所指出的，使用括号时，您不需要使用点(rdoCrust。j] )

在orderSubmit函数的开头，你有一个分号，它冒险进入了一个奇怪的位置，紧跟在括号之后，如下所示：

function orderSubmit(); {

而它应该看起来像这样：

function orderSubmit() {

祝你的项目好运！

您有多个问题

这里还有一个额外的分号：

function orderSubmit(); {

这里：

for (var i = 0; i < document.frm1.rdoSize.length; i++); {

在这里：

for (var j = 0; j < document.frm1.rdoCrust.length; j++); {

此处括号前的加分：

if (document.frm1.rdoSize.[i].checked) {

在这里：

if (document.frm1.rdoCrust.[j].checked) {

这里缺少一个加号：

msg += document.frm1.chkToppings[k].value + ' ';

<script type="text/javascript">
function orderSubmit(){
var name = document.getElementById("txtName").value;
var phone = document.getElementById("txtPhone").value;
phone = '(' + phone.substring(0,3) + ')' + phone.substring(3,6) + '-' + phone.substring(6);
var address = document.getElementById("txtAddress").value;
var msg = name + ", your order is being prepared. n";
msg+= "Your order will be delivered at " + address;
msg+= "Order details: n n";

var radioStateSize = document.getElementsByName('rdoSize')
radioStateSize.forEach((r)=>{
if(r.checked){msg += r.value}
})
var radioStateCrust = document.getElementsByName('rdoCrust')
radioStateCrust.forEach((r)=>{
if(r.checked){msg += ' '+r.value+" pizza with the following toppings: n"}
})
var chkToppings = document.getElementsByName('chkToppings')
chkToppings.forEach((r)=>{
if(r.checked){msg += ' '+r.value}
})

alert(msg);
}
</script>

您开发的解决方案存在许多问题：

在 for 循环中不定义变量k的情况下使用。
for();语句会根据循环阻止块执行。

在下面的解决方案中，选中了单选按钮和复选框。

let submitButton = document.getElementById('btnOrder');
let nameElement = document.getElementById('txtName');
let phoneElement = document.getElementById('txtPhone');
let addressElement = document.getElementById('txtAddress');
function getPhoneValue(value) {
let result = '(' + value.substring(0,3) + ')' + value.substring(3,6) + '-' + value.substring(6);
return result;
}
function getRadioButtonValue(element) {
let result; 

if(element !== null)
result = element.value;
else
result = "null";

return result;
}
submitButton.addEventListener('click', function(event) {
let phone = getPhoneValue(phoneElement.value);
var msg = `Name: ${nameElement.value} Address:  ${addressElement.value} Phone: ${phone}n Order details: `;
/* first radio button group */
var radioStateSize = getRadioButtonValue(document.querySelector("input[name='rdoSize']:checked"));

/* second radio button group */
var radioStateCrust = getRadioButtonValue(document.querySelector("input[name='rdoCrust']:checked"));

/* user notification */
msg += `${radioStateSize} ${radioStateCrust} pizza with the following toppings:n`;

/* checkbox group */
var chkToppings;
var checkboxes = document.querySelectorAll("input[name='chkToppings']:checked");
checkboxes.forEach((checkbox) => {
msg += checkbox.value + " ";
});

console.clear();
console.log(msg)
alert(msg);
});

body {
margin: 40px;
font-family: 'Open Sans';
}
#fieldSize, #fieldCrust {
width: 150px;
float: left;
border: none;
}
#fieldToppings {
width: 350px;
border: none;
}
fieldset {
margin-top: 20px;
}
#toppings1 {
float: left;
}
label {
display: inline-block;
width: 150px;
margin: 7px;
text-align: left;
}
input[type="text"] {
width: 250px;
}
div {
padding: 10px;
}
#btnOrder {
width: auto;
border-radius: 10px;
}

<body>
<fieldset id="main">
<legend><h2>Pizza Order!</h2></legend>
<form name="frm1">
<div>
<label for="lblName">Name:</label>
<input type="text" id="txtName">
</div>
<div>
<label for="lblPhone">Phone Number:</label>
<input type="text" id="txtPhone">
</div>
<div>
<label for="lblAddress">Address:</label>
<input type="text" id="txtAddress">
</div>
<fieldset id="fieldSize">
<legend><strong>Size</strong></legend>
<input type="radio" name="rdoSize" value="Small" id="rdoSmall"> Small <br>
<input type="radio" name="rdoSize" value="Medium" id="rdoMedium"> Medium <br>
<input type="radio" name="rdoSize" value="Large" id="rdoLarge"> Large <br>
</fieldset>
<fieldset id="fieldCrust">
<legend><strong>Crust</strong></legend>
<input type="radio" name="rdoCrust" value="Thin" id="rdoThin"> Small <br>
<input type="radio" name="rdoCrust" value="HandTossed" id="rdoHandTossed"> Hand Tossed <br>
<input type="radio" name="rdoCrust" value="GF" id="rdoGF"> Gluten Free <br>
</fieldset>
<fieldset id="fieldToppings">
<legend><strong>Toppings</strong></legend>
<div id="toppings1">
<input type="checkbox" name="chkToppings" id="chkPepperoni" value="Pepperoni"> Pepperoni <br>
<input type="checkbox" name="chkToppings" id="chkSausage" value="Sausage"> Sausage <br>
<input type="checkbox" name="chkToppings" id="chkChourico" value="Chourico"> Pepperoni <br>
<input type="checkbox" name="chkToppings" id="chkChicken" value="Chicken"> Chicken <br>
<input type="checkbox" name="chkToppings" id="chkAnchovies" value="Anchovies"> Anchovies <br>
</div>
<div id="toppings2">
<input type="checkbox" name="chkToppings" id="chkMushrooms" value="Mushrooms"> Mushrooms <br>
<input type="checkbox" name="chkToppings" id="chkPeppers" value="Peppers"> Peppers <br>
<input type="checkbox" name="chkToppings" id="chkFeta" value="Feta"> Feta <br>
<input type="checkbox" name="chkToppings" id="chkOlives" value="Olives"> Olives <br>
<input type="checkbox" name="chkToppings" id="chkOnions" value="Onions"> Onions <br>
</div>
</fieldset>
<input type="button" id="btnOrder" value="Order">
</form>
</fieldset>
</body>

这里有一个类型msg+= "Your contact infromation is: " + phone "n";你必须在phone + "n";之间添加+。

您可以运行下面的代码片段，它有效。

function orderSubmit() {
var name = document.getElementById("txtName").value;
var phone = document.getElementById("txtPhone").value;
phone = "(" + phone.substring(0,3) + ")" + phone.substring(3,6) + "-" + phone.substring(6);
var address = document.getElementById("txtAddress").value;
var msg = name + ", your order is being prepared. n";
msg+= "Your order will be delivered at " + address;
msg+= "Your contact infromation is: " + phone + "n"; // <- Problem is that you forgot "+"
msg+= "Order details: n n";

for(var i = 0; i < document.frm1.rdoSize.length; i++) {
if(document.frm1.rdoSize[i].checked) {
var radioStateSize = document.frm1.rdoSize[i].value;
}
}
for(var j = 0; j < document.frm1.rdoCrust.length; j++) {
if(document.frm1.rdoCrust[j].checked) {
var radioStateCrust = document.frm1.rdoCrust[j].value;
}
}
msg+= radioStateSize + " " + radioStateCrust + " pizza with the following toppings: n";
var chkToppings = document.frm1.chkToppings;
for(var k=0; k < document.frm1.chkToppings; k++) { // add var k
if(document.frm1.chkToppings[k].checked)
msg += document.frm1.chkToppings[k].value + ' ';
}
alert(msg);
}

body {
margin: 40px;
font-family: 'Open Sans';
}
#fieldSize, #fieldCrust {
width: 150px;
float: left;
border: none;
}
#fieldToppings {
width: 350px;
border: none;
}
fieldset {
margin-top: 20px;
}
#toppings1 {
float: left;
}
label {
display: inline-block;
width: 150px;
margin: 7px;
text-align: left;
}
input[type="text"] {
width: 250px;
}
div {
padding: 10px;
}
#btnOrder {
width: auto;
border-radius: 10px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link href='https://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet'>
<meta charset="utf-8">
<title>Gianni's Pizzeria</title>
</head>
<body>
<fieldset id="main">
<legend><h2>Pizza Order!</h2></legend>
<form name="frm1">
<div>
<label for="lblName">Name:</label>
<input type="text" id="txtName">
</div>
<div>
<label for="lblPhone">Phone Number:</label>
<input type="text" id="txtPhone">
</div>
<div>
<label for="lblAddress">Address:</label>
<input type="text" id="txtAddress">
</div>
<fieldset id="fieldSize">
<legend><strong>Size</strong></legend>
<input type="radio" name="rdoSize" value="Small" id="rdoSmall"> Small <br>
<input type="radio" name="rdoSize" value="Medium" id="rdoMedium"> Medium <br>
<input type="radio" name="rdoSize" value="Large" id="rdoLarge"> Large <br>
</fieldset>
<fieldset id="fieldCrust">
<legend><strong>Crust</strong></legend>
<input type="radio" name="rdoCrust" value="Thin" id="rdoThin"> Small <br>
<input type="radio" name="rdoCrust" value="HandTossed" id="rdoHandTossed"> Hand Tossed <br>
<input type="radio" name="rdoCrust" value="GF" id="rdoGF"> Gluten Free <br>
</fieldset>
<fieldset id="fieldToppings">
<legend><strong>Toppings</strong></legend>
<div id="toppings1">
<input type="checkbox" name="chkToppings" id="chkPepperoni" value="Pepperoni"> Pepperoni <br>
<input type="checkbox" name="chkToppings" id="chkSausage" value="Sausage"> Sausage <br>
<input type="checkbox" name="chkToppings" id="chkChourico" value="Chourico"> Pepperoni <br>
<input type="checkbox" name="chkToppings" id="chkChicken" value="Chicken"> Chicken <br>
<input type="checkbox" name="chkToppings" id="chkAnchovies" value="Anchovies"> Anchovies <br>
</div>
<div id="toppings2">
<input type="checkbox" name="chkToppings" id="chkMushrooms" value="Mushrooms"> Mushrooms <br>
<input type="checkbox" name="chkToppings" id="chkPeppers" value="Peppers"> Peppers <br>
<input type="checkbox" name="chkToppings" id="chkFeta" value="Feta"> Feta <br>
<input type="checkbox" name="chkToppings" id="chkOlives" value="Olives"> Olives <br>
<input type="checkbox" name="chkToppings" id="chkOnions" value="Onions"> Onions <br>
</div>
</fieldset>
<input type="button" id="btnOrder" value="Order" onclick="orderSubmit()">
</form>
</fieldset>
</body>
</html>

相关内容

最新更新

热门标签：