Javascript working in Safari but not Chrome


Ask A Question





Login To post a question

I created a series of simple drop downs that create custom sentences based on what option a user selects. The code takes these inputs and adds them to a sentence framework basically. The code works very well in Safari, doing everything as it should. However, when I run it in Chrome, I receive no output whatsoever. Any help would be appreciated, thank you.

I am receiving this error message in Chrome but not in 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>

For more info please click herehttps://stackoverflow.com/q/51290949



Have a question or need a custom quote?
info@smartinfocare.com