I am new just started a course on JS and wanted to have fun on an assignment but perhaps got a little ahead of myself. I decided to do a simple recreation of The Bridge of Death from Monty Python

I am trying to use JS in a HTML file to create a dropdown menu and then when a certain option is selected it changes the color of the paragraph elements.

I am unsure how to pull the values of the options created in the select form to style the element.
What I have now creates the dropdown but the options don't change anything

Sorry if this is super janky, I literally started a week ago.

Here is the code

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <title>The Bridge of Death!!!</title>
  <meta charset="UTF-8">
</head>

<body>
  <h1>You Approach the Bridge of Death</h1>
  <button id="q1button" onclick="q1_func()">Talk to Tim </button>
  <p id="question_1"></p>
  <p id="response_1"></p>

  <script>
    function q1_func() {
      const name = prompt("What is your Name", "Arthur, King of the Britains");
      if (name != null) {
        document.getElementById("question_1").innerHTML = "What is Your Name?";
        document.getElementById("response_1").innerHTML = "My name is " + name;
        document.getElementById("q1button").remove();
        q2_func();
      }
    }
  </script>
  <p id="question_2"></p>
  <p id="response_2"></p>
  <script>
    function q2_func() {
      var quest = prompt("What is your Quest", "To seek the Holy Grail!");
      if (quest != null) {
        document.getElementById("question_2").innerHTML = "What is Your Quest?";
        document.getElementById("response_2").innerHTML = quest;
        q3_func();
      }
    }
  </script>
  <p id="question_3"></p>
  <p id="response_3"></p>
  <script>
    function changeBackground(colors) {
      var val = list.options[list.selectedIndex].values;
      document.p.style.backgroundColor = val;
    }
  </script>
  <script>
    function q3_func() {
      var values = [" ", "blue", "red", "pink", "blue...no..."];
      var select = document.createElement("select");
      select.name = "colors";
      select.id = "colors";
      select.onchange = "changeBackground(this)";

      for (const val of values) {
        var option = document.createElement("option");
        option.values = val;
        option.text = val.charAt(0).toUpperCase() + val.slice(1);
        select.appendChild(option);
      }

      var label = document.createElement("label");
      label.innerHTML = "What is you favorite color?";
      label.htmlFor = "color";

      document.getElementById("question_3").appendChild(label).appendChild(select);
      document.getElementById("q2_button").remove();
      if (value === "blue...no...") {
        alert("Ahhhhh!!!!! *Death* ");
      };
    }
  </script>
</body>

</html>
```

I feel like there is a better way to create the select form. I could also use html to create it and then hide then reveal it in the q2\_func.

Any suggestions on where I could go from here?
Some limitations based on the assignment: no seperate files for js or css, just use js to change the style (no jquery or ajax)

Also the "blue...no..." should lead to an alert but that isn't working either...

Thank you in advance!
-Kevin