我创建了一系列简单的下拉菜单，根据用户选择的选项创建自定义句子。代码基本上将这些输入添加到句子框架中。该代码在 Safari 中运行得很好，一切都按其应有的方式进行。但是，当我在 Chrome 中运行它时，我没有收到任何输出。任何帮助将不胜感激，谢谢。
我在 Chrome 中收到此错误消息，但在 Safari 中未收到:
stackoverflow2.htm:39 Uncaught ReferenceError: input6 is not defined
at sentence (stackoverflow2.htm:39)
at HTMLButtonElement.onclick (stackoverflow2.htm:107)
<!DOCTYPE html>
<html>
<head>
<title>Hi</title>
<style type="text/css">
table,td,th {margin-left: auto;margin-right: auto}
.display {display: flex;align-items: center;justify-content: center;}
p {text-align: center;}
textarea {display: block;margin-left:auto;margin-right: auto;}
</style>
<script type="text/javascript">
function sentence() {
document.getElementById("s1").value = "";// reset
document.getElementById("s1").style.display = "block";
document.getElementById("r1").style.display = "block";
if (document.getElementById("z1").value == "") {
alert("Year, Make, and Model are needed");
document.getElementById("z1").focus();}
else if (document.getElementById("z2").value == "") {
alert("Mileage is needed");}
else if (document.getElementById("z3").value == "") {
alert("Exterior color is needed");}
else {
const input1 = document.getElementById("z1").value;
const input2 = document.getElementById("z2").value;
const input3 = document.getElementById("z3").value;
const input4 = document.getElementById("z4").value;
const input5 = document.getElementById("z10").value;
if (document.getElementById("z4").value=="okay"){
const input6 = "It has a few " + input5 + ". ";}
else {const input6 = "";}
document.getElementById("s1").value =
"Up for sale is a " + input1 + " with " + input2 + " miles. It is finished in "
+ input3 + ". It is in " + input4 + " shape. " + input6 + "I have owned this car for six years.";
}
}
function reset() {
document.getElementById("s1").value = "";
}
function hide() {
document.getElementById("s1").style.display = "none";
document.getElementById("r1").style.display = "none";
document.getElementById("z5").style.display = "none";
}
function condition ()
{
if (document.getElementById("z4").value == "okay") {
document.getElementById("z5").style.display = "block";}
else {
document.getElementById("z5").style.display = "none";
}
}
</script>
</head>
<body onload="hide()">
<table>
<tr>
<td>
<input type="text" id="z1" placeholder="Year, Make, Model" name="name" maxlength="100">
</td>
<td>
<input type="text" id="z2" placeholder="Mileage" name="name" maxlength="100">
</td>
<td>
<input type="text" id="z3" placeholder="Exterior Color" name="name" maxlength="100">
</td>
<td>
<div onclick="condition()">
<select name="condition" id="z4" class="chosen-select">
<option value="" disabled selected>Condition</option>
<option value="excellent">Excellent</option>
<option value="good">Good</option>
<option value="okay">Okay</option>
</select>
</div>
</td>
<td>
<div id="z5">
<select name="condition" id="z10" class="chosen-select">
<option value="" disabled selected>Why?</option>
<option value="scratches">Scratches</option>
<option value="dents">Dents</option>
<option value="mechanical issues">Mechanical Issues</option>
</select>
</div>
</td>
<td>
<input type="text" id="z2" placeholder="Test" name="name" maxlength="100">
</td>
</tr>
<tr>
</table>
<br>
<div class="display">
<button onclick="sentence()"> Submit </button>
</div>
<hr>
<br>
<textarea rows="10" cols="100" id="s1"></textarea>
<br>
<div class="display">
<button onclick="reset()" id="r1">Reset</button>
</div>
</body>
</html>最佳答案
如果该代码在 Safari 中运行，则它是 Safari 中的一个错误。
const 具有 block 作用域(如 let、un 类似 var)。切换到更传统的缩进和支撑，您可以:
if (document.getElementById("z4").value == "okay") {
const input6 = "It has a few " + input5 + ". ";
// `input6` exists here
} else {
const input6 = "";
// Another `input6` exists here
}
// No `input6` exists here
document.getElementById("s1").value =
"Up for sale is a " + input1 + " with " + input2 + " miles. It is finished in "
+ input3 + ". It is in " + input4 + " shape. " + input6 + "I have owned this car for six years.";
// Error here -------------------------------------^
这些 input6 标识符仅存在于声明它们的 block 中，而不存在于分配给 value 的行中。
相反，您需要在这些 block 的外部声明input6。您可以使用条件运算符完全删除 block :
const input6 = document.getElementById("z4").value == "okay"
? "It has a few " + input5 + ". "
: "";
或let在 block 之外:
let input6;
if (document.getElementById("z4").value == "okay") {
input6 = "It has a few " + input5 + ". ";
} else {
input6 = "";
}
关于Javascript 在 Safari 中工作，但在 Chrome 中不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51290949/