Using JS to add more input

Question

I'm trying to add more inputs using a button using JS and can't figure it out.

So, I have this code in my HTML:

 <div id="ingredients" class="ingredients">
      <h2 class="tk-freight-sans-pro">Ingredients</h2>
      <input type="text" placeholder="Ingredient">
      <input type="text" placeholder="Ingredient">
      <input type="text" placeholder="Ingredient">
      <br>
      <button class="button" onclick="addIngredient();">Add Ingredient</button>
    </div>

And my JS is here:

function addIngredient() {
        var list = document.getElementById("ingredients")
        list.innerHTML += "<input type="text" placeholder="Ingredient">"
     }

Does anyone know what's going on or what I need to do? Thanks!

Biduleohm · Accepted Answer · 2014-03-30 23:21:38Z

3

This:

list.innerHTML += "<input type="text" placeholder="Ingredient">"

should be like that:

list.innerHTML += "<input type=\"text\" placeholder=\"Ingredient\">"

or like that:

list.innerHTML += '<input type="text" placeholder="Ingredient">'

You can't use a double quote in a string wrapped by double quotes. You have to escape the quotes in the string or use simple quotes to wrap it.

Also you should put a ; after each instruction.

answered Mar 30, 2014 at 23:21

Biduleohm

7502 gold badges11 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jamis0n Over a year ago

@tns12 - You should accept this answer as correct :) (assuming it solved the problem you asked about, which it should)

Collectives™ on Stack Overflow

Using JS to add more input

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related