How to create a javascript quiz using the select element in html and paste the result in the main-CodePudding

When the users choose a selection from the quiz. I want an image of a beanie to generate on the main. Code Below of my html:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>BEANIE GENIE</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
  <div >
    <header >
      <img src="Images/bigger thing.png"  align="left">
    </header>
    <header >
      <h1>BEANIE GENIE</h1>
    </header>

    
    
    <nav >
      <div >
        <a href="index.html">HOME</a>
        <a href="Page 1.html">WISH</a>
        <a href="Page 2.html">BEANIE BUDDY</a>
        <a href="Page 3.html">CONTACT US</a>
      </div>  
    </nav>

    <aside  id=BeanieQuiz>
      <h2>WELCOME TO THE BEANIE QUIZ</h2>
      <label for="beanie">Select a color:</label>
      <select id="Question1">
        <option value="Blank"></option>
        <option value="color1">Blue</option>
        <option value="color2">Purple</option> 
        <option value="color3">Red</option> 
        <option value="color4">White</option>
        <option value="color5">Black</option> 
        <br>
      </select><br> 

      <label for="beanie">Select a style:</label>
      <select id="Question2">
        <option value="Blank"></option>
        <option value="style1">Design</option>
        <option value="style2">Solid Color</option><br>
      </select><br>

      <label for="beanie">Select a material:</label>
      <select id="Question3">
        <option value="Blank"></option>
        <option value="material1">Wool</option>
        <option value="material2">Cotton</option>
        <option value="material3">Polyster</option><br>
      </select><br>
<button type="button" onclick="quizResults()">Submit</button></aside>

    <main  id="quizBeanie">
      
      <!-- this is where the images show based off what the user selects-->
    </main>
  <footer >

Here is the javascript I tried to create for if the user only selects the first option on each question and I tried to have the image paste in the main just to test it out to see how it works, but it doesn't work. Code below of javascript:

    //Hidden page for the beanie quiz. When the user takes the quiz it will generate an image of a beanie based off the user selection
    function quizResults{
    let name = document.querySelectorAll("#Question1, #Question2, #Question3").value;
      if (name == "color1, style1, material1")
    "Images/Beanie11_ccexpress.png"
//supposed to post the image inside the main
      document.getElementById("quizBeanie").innerHTML
    }

CodePudding user response：

querySelectorAll returns a NodeList not a string, so the following line is incorrect:

if (name == "color1, style1, material1")

Check out this documentation https://www.w3schools.com/js/js_htmldom_nodelist.asp

CodePudding user response：

Your code is not entirely understandable. But your problem probably lies in checking whether the selected one is one of the following haystacks. I have tapped it once.

      let vals = []
      const haystack = "color1, style1, material1";
      selects.forEach(s => {
        if (haystack.includes(s.value)) {
          vals.push(s.value);
        }
      })      
      
      if (vals.length > 0) {
        // do something
      }

    //Hidden page for the beanie quiz. When the user takes the quiz it will generate an image of a beanie based off the user selection
    function quizResults() {      
      let selects = document.querySelectorAll("[id^=Question]");
      
      let vals = []
      const haystack = "color1, style1, material1";
      selects.forEach(s => {
        if (haystack.includes(s.value)) {
          vals.push(s.value);
        }
      })      
      
      if (vals.length > 0) {
        // do something
      }
      /* code which i dont undertood ;-) */
    "Images/Beanie11_ccexpress.png"
//supposed to post the image inside the main
      document.getElementById("quizBeanie").innerHTML
    }

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


<body>
  <div >
    <header >
      <img src="Images/bigger thing.png"  align="left">
    </header>
    <header >
      <h1>BEANIE GENIE</h1>
    </header>

    
    
    <nav >
      <div >
        <a href="index.html">HOME</a>
        <a href="Page 1.html">WISH</a>
        <a href="Page 2.html">BEANIE BUDDY</a>
        <a href="Page 3.html">CONTACT US</a>
      </div>  
    </nav>

    <aside  id=BeanieQuiz>
      <h2>WELCOME TO THE BEANIE QUIZ</h2>
      <label for="beanie">Select a color:</label>
      <select id="Question1">
        <option value="Blank"></option>
        <option value="color1">Blue</option>
        <option value="color2">Purple</option> 
        <option value="color3">Red</option> 
        <option value="color4">White</option>
        <option value="color5">Black</option> 
        <br>
      </select><br> 

      <label for="beanie">Select a style:</label>
      <select id="Question2">
        <option value="Blank"></option>
        <option value="style1">Design</option>
        <option value="style2">Solid Color</option><br>
      </select><br>

      <label for="beanie">Select a material:</label>
      <select id="Question3">
        <option value="Blank"></option>
        <option value="material1">Wool</option>
        <option value="material2">Cotton</option>
        <option value="material3">Polyster</option><br>
      </select><br>
<button type="button" onclick="quizResults()">Submit</button></aside>

    <main  id="quizBeanie">
      
      <!-- this is where the images show based off what the user selects-->
    </main>