CODEWITHSUNDEEP
javascripthtmlappendchild
Jack Hawk
Jack Hawk

Reputation: 31

Retrieve value on button-click

This is my code and I want to get value of myText. I tried with appendChild but it doesn't work. How can I get myText value when I click on button?

<div class="tut">
  <input type="text" name="" id="myText" style="padding: 2px; font-size: 18px; outline: none;">
  <input type="submit" name="" id="myBtn" onclick="myFunc()" style="padding: 2px; font-size: 18px;">
  <ul id="myList">
    <li>Coffe</li>
    <li>Tea</li>
  </ul>
  <script type="text/javascript">
    function myFunc() {
      var = document.getElementById("myText").value;
      document.getElementById("myList").appendChild();
    }
  </script>
</div>`

Upvotes: 0

Views: 64

Answers (4)

M Rajesh
M Rajesh

Reputation: 21

Try updating your function to this:

function myFunc() {
  var myText= document.getElementById("myText").value;
  document.getElementById("myList").innerHTML+="<li>"+myText+"</li>";
}

Upvotes: 0

Eduard Moraru
Eduard Moraru

Reputation: 785

You need to store the value of the input into a variable.

Then, you need to create a new List Item DOM node to which you set the value from the variable.

Finally, you need to add the newly created list item Node to your list Node.

<div class="tut">
  <input type="text" name="" id="myText" style="padding: 2px; font-size: 18px; outline: none;">
  <input type="submit" name="" id="myBtn" onclick="myFunc()" style="padding: 2px; font-size: 18px;">
  <ul id="myList">
      <li>Coffe</li>
      <li>Tea</li>
  </ul>
  <script type="text/javascript">
      function myFunc() {
        var value = document.getElementById("myText").value;
        var newItem = document.createElement('li');
        newItem.appendChild(document.createTextNode(value));
        
        var list = document.getElementById("myList");
        list.appendChild(newItem);
      }
  </script>
</div>`

Upvotes: 0

Nina Scholz
Nina Scholz

Reputation: 386883

For a plain text node, you could create one with document.createTextNode(text) and use it directly. Nevertheless you need still a node for the list element, which you can then append to the unordered list node.

function myFunc() {
    var text = document.getElementById("myText").value,
        li = document.createElement('li');
      
    li.appendChild(document.createTextNode(text));
    document.getElementById("myList").appendChild(li);
}
<div class="tut">
  <input type="text" name="" id="myText" style="padding: 2px; font-size: 18px; outline: none;">
  <input type="submit" name="" id="myBtn" onclick="myFunc()" style="padding: 2px; font-size: 18px;">
  <ul id="myList">
    <li>Coffe</li>
    <li>Tea</li>
  </ul>
</div>

Upvotes: 0

guest271314
guest271314

Reputation: 1

There should be an identifier following var, before = to identify the variable.

Create an <li> element using document.createElement(), set .textContent to variable identifier from previous line.

Pass created li element to .appendChild().

favorite
<div class="tut">
  <input type="text" name="" id="myText" style="padding: 2px; font-size: 18px; outline: none;">
  <input type="submit" name="" id="myBtn" onclick="myFunc()" style="padding: 2px; font-size: 18px;">
  <ul id="myList">
    <li>Coffe</li>
    <li>Tea</li>
  </ul>
  <script type="text/javascript">
    function myFunc() {
      var text = document.getElementById("myText").value;
      var li = document.createElement("li");
      li.textContent = text;
      document.getElementById("myList").appendChild(li);
    }
  </script>
</div>`

Upvotes: 1

Related Questions