Name Input from form not being inputted to desired span using .innertext-CodePudding

I am making a simple quiz where user inputs their name. Upon submitting their results their name and results are displayed. I gather the user's name input with.

A link to the repo for full code https://github.com/ambibma/programlanguageselector

When user submits form a function handleSubmit(event is executed)

function handleSubmit(event){
  event.preventDefault();

and variables are set

let nameInput = document.getElementById("nameinput").value;
const nameResult = document.getElementById("name");

Then branching is used to determine the result, when a result is reached, it is displayed through:

nameResult.innerText = nameInput;
htmlResult.classList.remove("hidden");

However, in my html:

<p> <span id="name">__</span> , you should learn HTML!</p>

The name is not inputted.

function handleSubmit(event){
  event.preventDefault();


let nameInput = document.getElementById("nameinput").value;
const nameResult = document.getElementById("name");

Then branching is used to determine the result, when a result is reached, it is displayed through:

nameResult.innerText = nameInput;
htmlResult.classList.remove("hidden");

However, in my html:

<p> <span id="name">__</span> , you should learn HTML!</p>

The name is not inputted.

CodePudding user response：

The problem is that you use the id to refer to a span DOM-element however there are many spans with the same id, which is wrong. The id has to be unique. A fix would be to put a same class to all these 'span' in the .html and to select the correct name depending on the parent in the .js:

Try the following .html:

<!DOCTYPE html>
<html lang="en-US">

<head>
  <title>Program Language Matcher</title>
  <link rel="stylesheet" href="css/styles.css" type="text/css">
  <script src="js/scripts.js"></script>
</head>

<body>
  <div id="quiz-start">
    <img src="./img/PLSlogo.png" id="plslogo">
    <div  id="quiz-start-text">
      <h1 id="quiz-start-header">Program Language Matcher</h1>
      <h2 id="quiz-start-sub-header">Find your missing technological half</h2>
      <p >Get Matched Now</p>
      <p ><button  id="start-quiz">Start!</button></p>
    </div>
    <div  id="quiz-page1">
      <h3>Enter a name:</h3>
      <label for="nameinput"></label>
      <input id="nameinput" type="text" name="nameinput">
      <h3>Do you like puzzles or websites?</h3>
      <form>
        <div  id="question1-div">
          <label for="question1"></label>
          <input id="form-question1" type="text"><br>
        </div>
        <div  id="question2-div">
          <h3>Which do you prefer more?</h3>
          <select id="question2">
            <option value="fox">fox</option>
            <option value="coffee">coffee</option>
            <option value="snakes">snakes</option>
          </select>
        </div>
        <div  id="question3-div">
          <h3>How much do you like Minecraft?</h3>
          <select id="minecraft">
            <option value="love">I love Minecraft</option>
            <option value="hate">I hate Minecraft</option>
            <option value="meh">I never played minecraft</option>
          </select>
        </div>
        <div  id="question4-div">
          <h3>Do you like<span >The Matrix</span>?</h3>
          <select id="question4-select">
            <option>Yes</option>
            <option>No</option>
          </select>
        </div>
        <div  id="question5-div">
          <h3>Cats or Dogs?</h3>
          <select id="question5-select">
            <option>Woof!</option>
            <option>Meow!</option>
          </select>
        </div>
        <div  id="question6-div">
          <h3>Do you like Epicodus?</h3>
          <select id="question6-select">
            <option>Yes</option>
            <option>Yes</option>
            <option>hmm Yes</option>
          </select>
        </div>
        <p><button  type="submit">Find my other technological half</button></p>
      </form>

    </div>
    <div  id="quiz-results-page">
      <div  id="result1">
        <img src="img/html.jpg" alt="hackerstyle html logo" id="htmlimg">
        <p> <span >__</span> , you should learn HTML!</p>
        <p><button type="onclick" id="reload">Make another Quiz!</button></p>
      </div>
      <div  id="result2">
        <img src="img/java.png" alt="old school java logo" id="javaimg">
        <p> <span >__</span> , you should learn javaScript!</p>
        <p><button type="onclick" id="reload">Make another Quiz!</button></p>
      </div>
      <div  id="result3">
        <img src="img/python.jpg" alt="a picture of a python" id="pythonimg">
        <p> <span >__</span> , you should learn Python! *hsss*</p>
        <p><button type="onclick" id="reload">Make another Quiz!</button></p>
      </div>
      <div  id="result4">
        <img src="img/csharp.png" alt="csharp logo" id="csharpimg">
        <p> <span ></span> you should learn C#!</p>
        <p><button type="onclick" id="reload">Make another Quiz!</button></p>
      </div>
      <div  id="resultwarning">
        <h3><span >You did not put valid inputs!</span></h3>
        <p><button type="onclick" id="reload">Try Again</button></p>
      </div>
    </div>
</body>

</html>

And the following .js:

window.addEventListener("load", function () {
  const startQuizBtn = document.getElementById("start-quiz");
  let quizStartText = document.getElementById("quiz-start-text");
  let quizPage1Form = document.getElementById("quiz-page1");
  let quizRestart = document.getElementById("quiz-results-page");
  let plsLogo = document.getElementById("plslogo");

  function reloadQuiz() {
    window.location.reload();
  }
  function hideQuiz() {
    quizStartText.setAttribute("class", "hidden");
    quizPage1Form.setAttribute("class", "hidden");
  }

  function toQuizPage1() {
    quizStartText.classList.add("hidden");
    plsLogo.classList.add("hidden");
    quizPage1Form.classList.remove("hidden");
  }
  function handleSubmit(event) {
    event.preventDefault();
    hideQuiz();
    const question1Input = document.getElementById("form-question1").value;
    const question2Input = document.getElementById("question2").value;
    let question3Input = document.getElementById("minecraft").value;
    let csharpResult = document.getElementById("result4");
    let pythonResult = document.getElementById("result3");
    let javascriptResult = document.getElementById("result2");
    let htmlResult = document.getElementById("result1");
    const resultWarning = document.getElementById("resultwarning");
    const nameInput = document.getElementById("nameinput").value;

    if (question1Input && question2Input && question3Input) {
      if (question1Input === "puzzles" && question2Input === "fox" || question2Input === "snakes" && question3Input === "meh" || question3Input === "hate") {
        const nameResult = pythonResult.querySelector('.name')
        nameResult.innerText = nameInput
        pythonResult.classList.remove("hidden");
      } else if (question1Input === "websites" && question2Input === "fox" && question3Input === "meh" || question3Input === "hate") {
        const nameResult = htmlResult.querySelector('.name')
        nameResult.innerText = nameInput;
        htmlResult.classList.remove("hidden");
        console.log("ran");
      } else if ((question1Input === "puzzles" || "websites") && (question2Input === "coffee") && (question3Input === "love" || question3Input === "meh")) {
        const nameResult = javascriptResult.querySelector('.name')
        nameResult.innerText = nameInput;
        javascriptResult.classList.remove("hidden");
      } else {
        const nameResult = csharpResult.querySelector('.name')
        nameResult.innerText = nameInput;
        csharpResult.classList.remove("hidden");
      }
    } else {
      resultWarning.classList.remove("hidden");
    }
  }
  quizRestart.addEventListener("click", reloadQuiz)
  quizPage1Form.addEventListener("submit", handleSubmit);
  startQuizBtn.addEventListener("click", toQuizPage1);
})