我创建了一系列简单的下拉菜单,这些下拉菜单根据用户选择的选项来创建自定义句子。该代码接受这些输入并将它们基本上添加到句子框架中。该代码在Safari中效果很好,可以完成所有应做的工作。但是,当我在Chrome中运行该程序时,不会收到任何输出。任何帮助,将不胜感激,谢谢。
我在Chrome中收到此错误消息,但在Safari中却没有:
stackoverflow2.htm:39未捕获的ReferenceError:未定义input6
在句子上(stackoverflow2.htm:39)
在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
具有块作用域(与let
不同,与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
标识符仅存在于声明它们的块中,而不是稍后分配给value
的行中。相反,您需要在这些块之外声明
input6
。您可以使用条件运算符完全摆脱这些块:const input6 = document.getElementById("z4").value == "okay"
? "It has a few " + input5 + ". "
: "";
或
let
块外:let input6;
if (document.getElementById("z4").value == "okay") {
input6 = "It has a few " + input5 + ". ";
} else {
input6 = "";
}
关于javascript - Javascript可在Safari中运行,但不能在Chrome中运行,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51290949/