How can I add the text from my input to my article?

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP



How can I add the text from my input to my article?



How can I write the text of the input into my article as a p element?


<article id="article">
<h1 id="article1">Articles</h1>
<p>this is p1</p>
</article>
<input type="text" name="links" id="playlist" size="60">
<input type="button" value="Add" onclick="addLink();">
<style>
#article
border: 1px solid red;

</style>
<script>
function addLink()
var addLink = document.getElementById("playlist").value;
document.getElementById("article").innerHTML("<p>" + addLink + "</p>" + "<br>");

</script>





With or without jQuery?
– FrankerZ
Aug 8 at 7:07





if it's possible, without
– Darius Enache
Aug 8 at 7:08




3 Answers
3



Element.innerHTML is not a function. It is a property. Use += :


Element.innerHTML


+=




function addLink()
var addLink = document.getElementById("playlist").value;
document.getElementById("article").innerHTML += "<p>" + addLink + "</p>" + "<br>";


#article
border: 1px solid red;


<article id="article">
<h1 id="article1">Articles</h1>
<p>this is p1</p>
</article>
<input type="text" name="links" id="playlist" size="60">
<input type="button" value="Add" onclick="addLink();">





This adds to the already existing html while the other answers replace it.
– Phil Cooper
Aug 8 at 7:10





@PhilCooper, you are right. I think OP wants to add multiple elements.
– Mamun
Aug 8 at 7:12



innerHTML is not a method but it is a property so use = instead of innerHTML(val):


innerHTML


=


innerHTML(val)




function addLink()
var addLink = document.getElementById("playlist").value;
document.getElementById("article").innerHTML = "<p>" + addLink + "</p>" + "<br>";


#article
border: 1px solid red;


<article id="article">
<h1 id="article1">Articles</h1>
<p>this is p1</p>
</article>
<input type="text" name="links" id="playlist" size="60">
<input type="button" value="Add" onclick="addLink();">




<article id="article">
</article>
<input type="text" name="links" id="playlist" size="60">
<style>
#article
border: 1px solid red;

</style>
<script>
var inp = document.getElementById("playlist");
inp.onkeyup = function ()
var text = document.getElementById("playlist").value;
document.getElementById("article").innerHTML=text;

</script>



You can run this, in this snippet, article changes on typing






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Popular posts from this blog

Firebase Auth - with Email and Password - Check user already registered

Dynamically update html content plain JS

How to determine optimal route across keyboard