CODEWITHSUNDEEP
javascripthtmlcss
Sina
Sina

Reputation: 270

Create new elements dynamically

I am trying to create new elements with name and time. I want to let the user customize them(ex. can be able to change color).

The dropdown option is only working for the first class it changes the color but the rest of them are not working. How can I fix it? 

function f_color() {
  var x = document.getElementById('Tcolor1').value;
  window.alert(x);
  if (x == 0) {
    document.getElementById('input1').style.color = "black";
    document.getElementById('input2').style.color = "black";
    document.getElementById('input3').style.color = "black";
  }
  if (document.getElementById('Tcolor').value == 1) {
    document.getElementById('input1').style.color = "red";
    document.getElementById('input2').style.color = "red";
    document.getElementById('input3').style.color = "red";
  }
  if (document.getElementById('Tcolor').value == 2) {
    document.getElementById('input1').style.color = "blue";
    document.getElementById('input2').style.color = "blue";
    document.getElementById('input3').style.color = "blue";
  }
}
<button id="btn2">Add Another Class</button>

 
  <form>

    <select class="form-control" id="Tcolor" name="Tcolor" style="color:black;   
               
           font-size: 20px; " onchange="f_color()">

      <option value=0>black </option>

      <option value=1>red</option>

      <option value=2>blue </option>

    </select>

  </form>

  <form>
    <input id="input1" name="className"><br>
    <input id="input2" name="classTime"><br>
    <input id="input3" name="classNote"><br>
  </form>

Upvotes: 0

Views: 126

Answers (3)

user11627958
user11627958

Reputation: 

function f_color() {
  var x = document.getElementById('Tcolor1').value;
  window.alert(x);
  if (x == 0) {
    document.getElementById('input1').style.color = "black";
    document.getElementById('input2').style.color = "black";
    document.getElementById('input3').style.color = "black";
  }
  if (document.getElementById('Tcolor').value == 1) {
    document.getElementById('input1').style.color = "red";
    document.getElementById('input2').style.color = "red";
    document.getElementById('input3').style.color = "red";
  }
  if (document.getElementById('Tcolor').value == 2) {
    document.getElementById('input1').style.color = "blue";
    document.getElementById('input2').style.color = "blue";
    document.getElementById('input3').style.color = "blue";
  }
}
<button id="btn2">Add Another Class</button>

 
  <form>

    <select class="form-control" id="Tcolor" name="Tcolor" style="color:black;   
               
           font-size: 20px; " onchange="f_color()">

      <option value=0>black </option>

      <option value=1>red</option>

      <option value=2>blue </option>

    </select>

  </form>

  <form>
    <input id="input1" name="className"><br>
    <input id="input2" name="classTime"><br>
    <input id="input3" name="classNote"><br>
  </form>

Upvotes: 0

user11575567
user11575567

Reputation: 

<button id="btn2">Add Another Class</button>

    
    <form>               

     <select class="form-control"  id="Tcolor" name = "Tcolor" style="color:black;   

       font-size: 20px; "  onchange="f_color()"  >   

            <option value=0 >black </option>

            <option value=1 >red</option>

            <option value=2 >blue </option>  

        </select >

    </form>

        <form>
            <input id="input1"   name="className" ><br>
        <input id="input2"   name="classTime" ><br>
        <input id="input3"   name="classNote" ><br>
      </form> 

      <script>
     
          function f_color(){
         var x=document.getElementById('Tcolor1').value; 
          window.alert(x);
        if ( x == 0) {
        document.getElementById('input1').style.color = "black";
        document.getElementById('input2').style.color = "black";
        document.getElementById('input3').style.color = "black";
    }
    if (document.getElementById('Tcolor').value ==  1 ) {
        document.getElementById('input1').style.color = "red";
        document.getElementById('input2').style.color = "red";
        document.getElementById('input3').style.color = "red";
    }
    if (document.getElementById('Tcolor').value ==  2) {
        document.getElementById('input1').style.color = "blue";
        document.getElementById('input2').style.color = "blue";
        document.getElementById('input3').style.color = "blue";
  }
  }
   </script>

remove comment

Upvotes: 1

uanirudhx
uanirudhx

Reputation: 316

In JavaScript, <!-- --> is not a valid comment tag. Also, in f_color, you are using the variable x only once. You should replace your other comparisons with x as well. Prefer CSS classes over the style attribute.

Applying all these changes (and a few other miscellaneous changes):

// do it in javascript
document.querySelector(".form-control").onchange = f_color;

function f_color(e) { // e has the calling element in it
  let /*var can be used too*/ x = parseInt(e.target.value, 10);
  let input1 = document.getElementById("input1");
  let input2 = document.getElementById("input2");
  let input3 = document.getElementById("input3");
  alert(x);
  let color = "";
  if (x === 0) {
    color = "black";
  } else if (x === 1) {
    color = "red";
  } else if (x === 2) {
    color = "blue";
  }
  alert(color);
  input1.style.color = color;
  input2.style.color = color;
  input3.style.color = color;
}
.form-control {
  color: black;
  font-size: 20px;
}
<button id="btn2">Add Another Class</button>

<ol>
  <form>

    <select class="form-control" name="Tcolor">
      <option value="0">black</option>
      <option value="1">red</option>
      <option value="2">blue</option>
    </select>

  </form>

  <form>
    <input id="input1" name="className"><br>
    <input id="input2" name="classTime"><br>
    <input id="input3" name="classNote"><br>
  </form>
</ol>

But really, the problem is the mis-spelling of "Tcolor" in

var x = document.getElementById('Tcolor1').value;

It should be "Tcolor".-

Upvotes: 0

Related Questions