Simple select colour change not working JavaScript-CodePudding

I'm new to programming and i'm following CS50, I have run the below code verbatim from the instructor but it does not work and I do not know why.

document.addEventListener("DOMContentLoaded", () => {
  document.querySelector("select").onchange = function () {
    document.querySelector("#hello").getElementsByClassName.color = this.value;
  };
});

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <h1 id="hello" >hello</h1>

  <select>
    <option value="black">Black</option>
    <option value="red">Red</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
  </select>
  <br />
  <br />
</body>

</html>

CodePudding user response：

    document.querySelector("#hello").getElementsByClassName.color = this.value;

getElementsByClassName is a function but you didn't call it. Not sure what the intention is but this code would not work. It should be something like this;

document.querySelector("#hello").getElementsByClassName("YOUR_CLASS_NAME").style.color = this.value;

CodePudding user response：

You can use getElementById instead of querySelector like this and it will work:

<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
     <h1 id="hello" >hello</h1>

     <select id="select">
        <option value="black">Black</option>
        <option value="red">Red</option>
        <option value="blue">Blue</option>
        <option value="green">Green</option>
     </select>

 </body>

 </html>

JS:

document.addEventListener("DOMContentLoaded", () => {
   document.getElementById("select").onchange = function () {
       document.getElementById("hello").style.color = this.value;
   };
});

CodePudding user response：

document.addEventListener("DOMContentLoaded", () => {
  document.querySelector("select").onchange = function () {
    document.querySelector("#hello").style.color = this.value;
  };
});

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <h1 id="hello" >hello</h1>

  <select>
    <option value="black">Black</option>
    <option value="red">Red</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
  </select>
  <br />
  <br />
</body>

</html>

document.addEventListener("DOMContentLoaded", () => {
   document.querySelector("select").onchange = function () {
      document.querySelector("#hello").style.color = this.value;
   };
});

I hope it will help.