Javascript 上的程序无法正常工作答案

【问题标题】：program on Javascript doesn't work correctlyJavascript 上的程序无法正常工作
【发布时间】：2013-05-28 21:51:43
【问题描述】：

我对这个程序的结果有疑问：当我检查“Protector”、“Headset”、“Case”和“Games”时，我应该收到“Kindle”、“Nokia”和“Wii”。但是，我只收到一个值 - “Kindle”（在 Google Chrome 和 Internet Explorer 中）。此外，我收到了 Opera 中的所有值（也是重复的）。你能帮我解决这些问题吗？提前致谢。

<html>
<head>
<script type="text/javascript">

function product(){ 
    var checkboxes = document.getElementsByName('checkboxes');
    var i=0;
    var j=0;
    var tech = [
    ["Kindle","Protector"],
    ["Iphone","Headset"],
    ["Iphone","US Charger"],
    ["Iphone","USB cable"],
    ["Iphone","Case"],
    ["Nokia","Protector"],
    ["Nokia","Headset"],
    ["Nokia","Case"],
    ["Wii","Games"]
    ];

    for (i=0 ; i < tech.length; i++){
        for(j=0 ; j< checkboxes.length; j++){
            if ((tech[i][1] == checkboxes[j].value)&&(checkboxes[j].checked)){
            document.write(tech[i][0]);
            document.write("<br>");
            }
        }
    }
}
</script>
</head>

<body>

<form name="Accessories">
<input type="checkbox" name="checkboxes" value="Protector"> Protector <br>
<input type="checkbox" name="checkboxes" value="Headset"> Headset <br>
<input type="checkbox" name="checkboxes" value="US Charger"> US Charger <br>
<input type="checkbox" name="checkboxes" value="USB cable"> USB cable <br>
<input type="checkbox" name="checkboxes" value="Case"> Case <br>
<input type="checkbox" name="checkboxes" value="Games"> Games </br>
<input type="button" name="Check" onClick="product()" value="Search a product">
</form>

</body>
</html>

【问题讨论】：

标签： javascript html arrays for-loop

【解决方案1】：

当您使用 document.write() 时，您的表单元素不再存在，因此您的复选框数组将不存在。这就是为什么你只得到'kindle'的原因。尝试改用 console.log(tech[i][0]) 并在 chrome 中运行它。你应该得到：Kindle、Iphone、Iphone、Nokia、Nokia、Nokia、Wii。

【讨论】：

【解决方案2】：

在页面呈现后调用document.write() 将彻底清除页面。在某些浏览器中，这意味着 JavaScript 代码本身将停止工作。

你可以试试这个：

将<div> 添加到页面末尾（当然是在<body> 内），并为其指定“设置”的“id”值。

更改代码以设置其内容：

var content = "";
for (i=0 ; i < tech.length; i++){
    for(j=0 ; j< checkboxes.length; j++){
        if ((tech[i][1] == checkboxes[j].value)&&(checkboxes[j].checked)){
          content += tech[i][0] + '<br>';
        }
    }
}
document.getElementById("settings").innerHTML = content;

【讨论】：

这是有效的，但第二个问题是保留。当我检查某些内容时，结果应该返回检查所有参数的唯一值。例如：当我选中“Protector”时，结果应该只有“Kindle”，而不是“Kindle”和“Nokia”，因为“Nokia”的其他参数没有被选中。谢谢你帮助我
@user2432205 您的代码中没有任何内容试图确保这种行为，但我不确定我是否明白您的意思。因为您使用的是复选框而不是单选按钮，所以可以同时选中多个。
我不能用单选按钮来做，因为我应该在更多选项之间进行选择。我将更改参数以使其更清晰。 [“煮鸡蛋”、“鸡蛋”]、[“BLT 三明治”、“培根”]、[“BLT 三明治”、“生菜”]、[“BLT 三明治”、“番茄”]、[“BLT 三明治”、 “面包”]、[“美式早餐”、“鸡蛋”]、[“美式早餐”、“培根”]、[“美式早餐”、“面包”]、[“炸薯条”、“土豆”]跨度>
如果只检查“鸡蛋”，我只会有“煮鸡蛋”的产品，而不是“美式早餐”的产品，因为在“美式早餐”中，我也有“培根”和“面包” .第二个例子，如果我检查“鸡蛋”和“培根”，结果将是相同的（煮鸡蛋），因为我没有面包（未选中）。我希望你能这样理解我。