我创建了一系列简单的下拉菜单,这些下拉菜单根据用户选择的选项来创建自定义句子。该代码接受这些输入并将它们基本上添加到句子框架中。该代码在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/

10-11 07:38