CODEWITHSUNDEEP
javascript
Luis Fernando Scripcaru
Luis Fernando Scripcaru

Reputation: 401

Can't write inside text box after creating it whit js

hi so i made something like a table i need it for my matrix but after creating the columns i observed that i can't write inside them

function create(param) {

    var i, target = document.getElementById('results');
	var matrix = []
    target.innerHTML = '';

    for(i = 0; i < param; i += 1) {
	target.innerHTML +='<br>'
	 for(var j=0;j<param;j+=1)
        target.innerHTML += '<input type="text"id="' + "value_" + i + "_" + j + '">';
    }
}
<html>
<head>
</head>
<body>
<button onclick="create(5)" style="width:300px;height:30px;"/><br><br>
<div id="results"> </div>
</body>
</html>

What do i have to modify/write/delete to can write inside them?

Upvotes: 0

Views: 32

Answers (2)

Alpix
Alpix

Reputation: 327

Why?

Function is runned everytime you click an input. This overwrites the input -> you cant fill it.

This is a hotfix, if you want to run the function "create" more than only one time, the fix doesnt work for you.

Better fix: check always your tags and close them and make sure, that the inputs arent in a HTML-Element, running the create func.

var runnedCreate = false;

function create(param) {

    if (runnedCreate != true ) {
        var i, target = document.getElementById('results');
	    var matrix = []
        target.innerHTML = '';

        for(i = 0; i < param; i += 1) {
	    target.innerHTML +='<br>'

	        for(var j=0;j<param;j+=1) {
                target.innerHTML += '<input type="text"id="' + "value_" + i + "_" + j + '">';
            }
        }
        runnedCreate = true;
   }
}
<html>
<head>
</head>
<body>
<button onclick="create(5)" style="width:300px;height:30px;"/><br><br>
<div id="results"> </div>
</body>
</html>

Upvotes: 0

Joseph Marikle
Joseph Marikle

Reputation: 78520

<button> is not a self closing tag. You need to include </button> . Otherwise, the tag is unclosed until the end of the document. This causes your results div to capture the onclick event that writes the table. The result is that clicking into your text boxes causes the table to be rewritten.

function create(param) {

    var i, target = document.getElementById('results');
	var matrix = []
    target.innerHTML = '';

    for(i = 0; i < param; i += 1) {
	target.innerHTML +='<br>'
	 for(var j=0;j<param;j+=1)
        target.innerHTML += '<input type="text"id="' + "value_" + i + "_" + j + '">';
    }
}
<html>
<head>
</head>
<body>
<button onclick="create(5)" style="width:300px;height:30px;"></button><br><br>
<div id="results"> </div>
</body>
</html>

Upvotes: 2

Related Questions