How do I change the color of the header with JavaScript (I am using innerHTML) without changing the-CodePudding

When I use the select menu and select the color purple for example. I want the color of the header to change to that color but I do not want the text to change. The innerHTML is changing both the text and the color. How do I go about solving this issue?

#header {
color: green;
    }
#list {
        margin-top: 20px;
    }

.purple-color{
     color: purple;
 }
</style>
</head>
<body>
<h1 id="header">Header</h1>
    <!--Change Value of Header with Input Field-->
<div>
 Name:<input type="text" id="my-text" value="">
<p>Click the button to change the value of the header.</p>
<button onclick="onChange('header')">Click Me</button>
</div>

    <!-- Select Size Menu-->
<div class= "select-menu">
    <label for="header-color">Color:</label>

    <select name="select-menu" id = "list" onchange="changeColor()" >
    <option value="purple">Purple</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
    </select>
  </div>

  <script>
      function changeColor(){
          const color = document.getElementById("header");
          const selectColor = document.getElementById('list').value;
    

         if (selectColor === "purple") {
             color.innerHTML = selectColor;
             color.style = 'color: #F00';
         }
         else if (selectColor === "blue") {
            color.innerHTML = selectColor;
            color.style = 'color: #F00';
         }

         else if (selectColor === "green") {
            color.innerHTML = selectColor;
            color.style = 'color: #F00';
         }
        
      }
  </script>

CodePudding user response：

It's probably more efficient to have the form values be the colors you want to set. Then you can just have your changeColor() function set the color according to selectColor. Setting the text color should be done with color.style.color, not color.style.

Further, the changeColor() function shouldn't be changing the innerHTML of the header. It seems, from your comments, that this should be done in response to clicking the Click Me button.

This code should do what you want:

<html>
    <head>
        <style type="text/css">
            #header {
                color: green;
            }
            #list {
                margin-top: 20px;
            }
        </style>
    </head>
    
    <body>
        <h1 id="header">Header</h1>
            <!--Change Value of Header with Input Field-->

        <div>
            Name:<input type="text" id="my-text" value="">
            <p>Click the button to change the value of the header.</p>
            <button onclick="changeText('header')">Click Me</button>
        </div>
        
        <!-- Select Size Menu-->
        <div class= "select-menu">
            <label for="header-color">Color:</label>

            <select name="select-menu" id = "list" onchange="changeColor()" >
                <option value="purple">Purple</option>
                <option value="blue">Blue</option>
                <option value="green">Green</option>
            </select>
        </div>
    
    <script>
        function changeColor(){
            const color = document.getElementById("header");
            const selectColor = document.getElementById("list").value;
            color.style.color = selectColor;
            
        }

        function changeText(id) {
            const elem = document.getElementById(id);
            const text = document.getElementById("my-text").value;
            elem.innerHTML = text;
        }
    </script>

    </body>
</html>

CodePudding user response：

The script tag after modification:

<script>
    function changeColor(){
        const color = document.getElementById("header");
        const selectColor = document.getElementById('list').value;

       if (selectColor === "purple") {
          color.setAttribute('style', 'color: purple')
       }
       else if (selectColor === "blue") {
          color.setAttribute('style', 'color: blue')
       }

       else if (selectColor === "green") {
          color.setAttribute('style', 'color: green')
       }

       // You can also use something like this
       // color.setAttribute('style', `color: ${selectColor}`); // selectColor has to be a valid css color value
      
    }
</script>

CodePudding user response：

Setting innerHTML replaces the HTML content of the element, in your case its text. Just use color.style.color alone. Note that I've used color.style.color, and not color.style - you were reassigning the entire style object to a string!

function changeColor() {
  const color = document.getElementById("header");
  const selectColor = document.getElementById('list').value;


  if (selectColor === "purple") {
    // color.innerHTML = selectColor;
    color.style.color = selectColor
  } else if (selectColor === "blue") {
    // color.innerHTML = selectColor;
    color.style.color = selectColor;
  } else if (selectColor === "green") {
    // color.innerHTML = selectColor;
    color.style.color = selectColor;
  }

}

#header {
  color: green;
}

#list {
  margin-top: 20px;
}

.purple-color {
  color: purple;
}

</style></head><body>

<h1 id="header">Header</h1>
<!--Change Value of Header with Input Field-->
<div>
  Name:<input type="text" id="my-text" value="">
  <p>Click the button to change the color of the header.</p>
  <button onclick="changeColor()">Click Me</button>
</div>

<!-- Select Size Menu-->
<div >
  <label for="header-color">Color:</label>

  <select name="select-menu" id="list" onchange="changeColor()">
    <option value="purple">Purple</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
  </select>
</div>

Your confusion here may be a good reminder to be careful what you name things. Why not name the header element header or something similar? That way when people read your code, they'll see something a little more indicative of what's happening, as in header.style.color = "purple" rather than something kind of confusing like color.style.color = "purple".