Create new elements dynamically

Related searches

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>

<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>

How to dynamically create new elements in JavaScript , New elements can be dynamically created in JavaScript with the help of createElement() method. The attributes of the created element can be� Create a <p> element with some text, use innerText to set the text, and append it to the document: var para = document.createElement("P"); // Create a <p> element para.innerText = "This is a paragraph"; // Insert text

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>

HTML: Add elements dynamically using JS, You can use the .innerHTML += method wired up to an "Add Activity" button. Each time you click the button a new table row is added with the� However, both the append () and prepend () methods can take an infinite number of new elements as parameters. The new elements can be generated with text/HTML (like we have done in the examples above), with jQuery, or with JavaScript code and DOM elements. In the following example, we create several new elements.

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>

HTML DOM createElement() Method, Adding Elements Dynamically � function addElement(parentId, elementTag, elementId, html) { � // Adds an element to the document � var p =� You can create an element using document.createElement. After creation you can add attributes. If you want the element to show up in your document, you have to insert in into the DOM-tree of the document. Try playing around with this code:

Adding and Removing Elements on the Fly Using JavaScript � A , In the tutorial we'll go through this process and see how we can use JavaScript to create a new Duration: 9:40 Posted: Jan 23, 2019 TypeScript's document object has a method called "createElement ()" which can be used to create HTML elements dynamically. The following example shows how to create dynamic controls in a web form using TypeScript. In this example, we have used the "setAttribute ()" method to assign the attributes to our dynamically created element.

JavaScript Create HTML Element: How to dynamically add tags to , This is a lot simpler than you think, in our function that will create our new element, we need to attach the event handler, and function we want to assign to it, this can be done like so: // Create the new element var li = document . createElement ( ' li ' ); li . className = ' dynamic-link ' ; // Class name li . innerHTML = dynamicValue ; // Text inside $ ( ' #links ' ). appendChild ( li ); // Append it li . onclick = dynamicEvent ; // Attach the event!

To add a new element to the HTML DOM, you must create the element (element node) first, and then append it to an existing element.

Comments
  • Thanks, I have made the changes you mentioned. But after adding a new class, the color is not changeable.
  • You need to add that new class to the JavaScript code as well if you want it to change as well. Also, make sure, if you are setting the color property in your class, that it does not have the !important specifier on it.