+ 1

how do i add a new p tag to this code each time text is entered in the input ?

<!DOCTYPE html> <html> <head> </head> <body> <form id="form1"> Name:<input name="name" type="text" size="20"> <button onclick="outputname()">submit</button> </form> <p id="demo"></p> <script> function outputname(){ var x,y,name; x = document.getElementById("form1"); y = x.elements["name"].value; document.getElementById("demo").innerHTML = "Hello "+ y +"<br>"; document.getElementById("demo").innerHTML += "How are you today " + y + "? "; this.event.preventDefault(); } </script> </body> </html>

html javascript all

3rd Jul 2017, 8:24 AM

Hoeft Brian

12 Answers

+ 4

Change <p id="demo"></p> by <div id="demo"></div>, then your JS as that: document.getElementById("demo").innerHTML += "<p>Hello "+y+"<br>How are you today "+y+"?</p>"; By this way, you're keeping previous innerHTML content, and appending the new <p> content... However, you need to concanetate self closed tags at once, because each time the value is updated, the innerHTML string is evaluated and parsed by browser, so not closed tags will be closed implicitly; writting: document.getElementById("demo").innerHTML += "<p>Hello "+y+"<br>"; document.getElementById("demo").innerHTML += "How are you today "+y+"?</p>"; ... will result as: <p>Hello value_of_y</p><br><How are you today value_of_y</p> Wich is not strictly what's expected :P

3rd Jul 2017, 8:53 AM

visph

+ 5

When window is reloaded, the new document scripts are running, and the 'onload' window event is fired when all document and linked ressources are parsed and loaded... With JS you can dynamically initialize the fields values at this time ^^ (but there's also a <form> html attribute to specify to not remember fields values: 'autocomplete="off"', or you can use the reset() method of form ;P)

3rd Jul 2017, 9:21 AM

visph

+ 4

Use reset() method at window.onload event: window.onload = function() { document.getElementById('myformID').reset(); } ... or directly in the 'onload' event of the <body>: <body onload="document.getElementById('myformID').reset();">

3rd Jul 2017, 9:27 AM

visph

+ 3

Anyway, if your question is about replacing the button by a call to the function each time the value of text <input> is modified, you can handle it by many ways: + use of 'onchange' event from the text <input>, wich is fired on losing focus (equivalent to 'onblur' event), meaning the event occurs only when the user click outside of the text <input> + use the Html5 new 'oninput' event, wich is fired each time the text <input> value change, without waiting for focus lost + use the old workaround (previous to Html5) to get the changed value before focus lost: use the 'onkeyup'/'onkeydown' events...

3rd Jul 2017, 8:59 AM

visph

+ 1

@Junaid it makes it so the window doesn't reload right after the input is displayed. before i added it every time i enterd something it would flash on the screen then disappear.

3rd Jul 2017, 9:05 AM

Hoeft Brian

+ 1

just refresh the page and it will reset

3rd Jul 2017, 9:14 AM

Hoeft Brian

+ 1

can you show the code you're using?

3rd Jul 2017, 9:19 AM

Hoeft Brian

+ 1

Do i have to use the reset() method just with the onclick submit button .When i submit it it will reset the whole form back to normal