Adding dynamically text in JavaScript

Question

Javascript:

function changeIt()
{
    var i = 1;
    var j = 1;
    my_div.innerHTML = "<br><br><input type='text' name='mytext' + i  value='pleaseEnter malzeme' >   <input type='text' name='mytet2'+j value='please quantity'> "
}

HTML:

<input type="button" value="Add Ingredients" onClick="changeIt()" />
<div id="my_div"></div>

I have these code piece to add textbox dynamically in my HTML file. Problem is that I cannot reach text.

System.out.print(request.getParameter("mytext1")); //doesnt work to reach mytext1 value.

How can I solve this problem? Thanks in advance.

You don't seem to have a function request.getParameter nor do you have out.print. Have you tried looking in your console? (hit F12) you'll see a bunch of errors in there. — Mike Cluck
– Mike Cluck, Commented Apr 22, 2016 at 22:12
Is this a Java question or a JavaScript question? Either way, you aren't showing us enough code. — castletheperson
– castletheperson, Commented Apr 22, 2016 at 22:15
@MikeC That is Java code. They are showing the back-end, which has no F12. — castletheperson
– castletheperson, Commented Apr 22, 2016 at 22:19
out.print(request.getParameter("mytext1")) returns null value, but when i change to out.print(request.getParameter("mytext")) returns not null value. I think problem is on concatenation . — HelloWorld
– HelloWorld, Commented Apr 22, 2016 at 22:27

Hugo G · Accepted Answer · 2016-04-22 22:26:14Z

1

Okay, first to get a reference of an element in JavaScript you need to call document.getElementById("my_div"). There is no such thing as automatic global scope population with IDs in JS.

Then your HTML string contains variables which are written as part of the string. Concatenation in JS works with the plus sign (+). So your string should be:

"<br><br><input type='text' name='mytext" + i + "' value='pleaseEnter malzeme'><input type='text' name='mytet2" + j + "' value='please quantity'>"

Everything assembled together:

<script type="text/javascript">
function changeIt() {
    var i = 1;
    var j = 1;
    document.getElementById("my_div").innerHTML = "<br><br><input type='text' name='mytext" + i + "' value='pleaseEnter malzeme'><input type='text' name='mytet2" + j + "' value='please quantity'>"
}
</script>

<input type="button"  value="Add Ingredients" onClick="changeIt()">
<div id="my_div"></div>

Regarding the print I have no idea what you're actually trying there...

answered Apr 22, 2016 at 22:26

Hugo G

16.7k9 gold badges62 silver badges82 bronze badges

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

3 Comments

HelloWorld Over a year ago

really thanks for this answer. Nearly 5-6 hours, i tried to solve this problem.

Barmar Over a year ago

There is no such thing as automatic global scope population with IDs in JS. See stackoverflow.com/questions/6381425/…

Hugo G Over a year ago

Interesting. Thanks for the info. However I think JS starters are better off not knowing something like this exists. ;-)

zack.lore · Accepted Answer · 2016-04-22 22:14:01Z

1

Try changing your innerHTML to this:

my_div.innerHTML ="<br><br><input type='text' name='mytext" + i + "' value='pleaseEnter malzeme' >   <input type='text' name='mytet2" +j + "' value='please quantity'> "

answered Apr 22, 2016 at 22:14

zack.lore

5275 silver badges10 bronze badges

Collectives™ on Stack Overflow

Adding dynamically text in JavaScript

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related