CODEWITHSUNDEEP
javascripthtml
davidgh
davidgh

Reputation: 1313

why after creation JavaScript objects they are being removed?

I want to add DOM object into my html, but after adding they are being removed immediately. Could someone please help to debug below presented code?

function addVertex () {
	var iTr = document.createElement('tr');
	var jTr = document.createElement('tr');

	iTr.id = 'block';
	iTr.className = 'block';
	jTr.className = 'block_2';
	iTr.appendChild(jTr);

	document.getElementById('vertex_table').appendChild(iTr);
}
<form>
	<table>
		<tbody id="vertex_table">
		<tr>
			<td>Vertex start</td>
			<td>Vertex end</td>
			<td>Weight</td>
		</tr>
		</tbody>
	</table>
	<input type="submit" value="Add Vertex" onclick="addVertex()"/>
</form>

Upvotes: 1

Views: 24

Answers (1)

dfsq
dfsq

Reputation: 193271

The problem is that the form is submitted when you click button with type="submit". This causes page reload. I assume that in your case you don't actually need to send form. So change button type to button and it will work:

<input type="button" value="Add Vertex" onclick="addVertex()" />

Upvotes: 1

Related Questions