Jump to content

JavaScript Null Document Query Selector

prolemur
Go to solution Solved by Ciccioo,

-snip-

this could work:

first you check if there is an input, and if there is you remove its listener.

then you insert the new input

function f() {	var last = document.querySelector("input[name=o" + num + "]");	//var last = document.getElementsByTagName("input").getElementsByName("o" + num)[0];	if(last)	{		last.removeEventListener('input', f);	}	// move on to generating the next input	++num;	var node = document.createElement("div");	var input = document.createElement("input");	var span = document.createElement("span");	input.setAttribute("name", "o" + num);	input.setAttribute("maxlength", "77");	input.setAttribute("placeholder", "Enter poll option...");	span.appendChild(document.createTextNode(num + 1 + "."));	node.appendChild(input)	node.appendChild(span);	document.getElementById("options").appendChild(node);	input.addEventListener('input', f, false);}

edit: as for the boolean thing, you know that the last input of the page will never be inputted, because if it was then the script would generate another one which wouldn't be inputted

So the main problem so far, heh heh is that last is for some reason null. However when the same code for the script is pasted into the dev tool console it brings up the element I wanted.

Need answers :)

<script>	var num = 0;	var last = document.querySelector("input[name='o" + num + "']");	console.log(last);	last.addEventListener(input, function(){f(1);});	function f(loops) {		for(var i = 0; i < loops; i++) {			var node = document.createElement("div");			var input = document.createElement("input");			input.setAttribute("name", "o" + num);			input.setAttribute("maxlength", "77");			var span = document.createElement("span");			span.appendChild(document.createTextNode(++num));			span.appendChild(document.createTextNode("."));			node.appendChild(input)			node.appendChild(span);			document.getElementById("options").appendChild(node);		}	}</script>
Link to comment
Share on other sites

Link to post
Share on other sites

You need to either put the script at the end of the <body> or run it at the body ondomcontentready/onload event

Your script is running when the page is not created yet so there is no input element. By the time you open the console and run that instruction manually, the document is built

Link to comment
Share on other sites

Link to post
Share on other sites

You need to either put the script at the end of the <body> or run it at the body ondomcontentready/onload event

Your script is running when the page is not created yet so there is no input element. By the time you open the console and run that instruction manually, the document is built

There was a problem with it because var last had not been created yet because the function is what creates it. So i moved that variable declaration into the function body. Now I need that function to be called when input is typed into the last text field.

	<script>		var num = 0;		function f(loops) {			for(var i = 0; i < loops; i++) {				var node = document.createElement("div");				var input = document.createElement("input");				input.setAttribute("name", "o" + num);				input.setAttribute("maxlength", "77");				var span = document.createElement("span");				span.appendChild(document.createTextNode(num + 1));				span.appendChild(document.createTextNode("."));				node.appendChild(input)				node.appendChild(span);				document.getElementById("options").appendChild(node);				var last = document.querySelector("input[name=o" + num++ + "]");				last.addEventListener(input, function(){f(1);});			}		}	</script>
Link to comment
Share on other sites

Link to post
Share on other sites

There was a problem with it because var last had not been created yet because the function is what creates it. So i moved that variable declaration into the function body.

It's not. The variable is created correctly, but querySelector() returns nothing because the page doesn't exist yet. Moving that line into the function body delays the code execution, so querySelector returns succesfully.

To assign a listener to the input element you need to wait for it to be created, which you can do in the ways i described

Link to comment
Share on other sites

Link to post
Share on other sites

It's not. The variable is created correctly, but querySelector() returns nothing because the page doesn't exist yet. Moving that line into the function body delays the code execution, so querySelector returns succesfully.

To assign a listener to the input element you need to wait for it to be created, which you can do in the ways i described

I already put it at the end of the body and my body tag was:

<body onload="l()">

which is a function that just calls f() 4 times.

Link to comment
Share on other sites

Link to post
Share on other sites

I already put it at the end of the body and my body tag was:

<body onload="l()">

which is a function that just calls f() 4 times.

 

...and? what works? what doesn't? can you provide the whole code?

 

keep in mind that moving the addEventListener call inside the function will add a listener every time the user writes something inside the input box, which will quickly lead to an event supernova.

addEventListener is also much preferred to the deprecated HTML onload="f()"

Link to comment
Share on other sites

Link to post
Share on other sites

...and? what works? what doesn't? can you provide the whole code?

 

keep in mind that moving the addEventListener call inside the function will add a listener every time the user writes something inside the input box, which will quickly lead to an event supernova.

addEventListener is also much preferred to the deprecated HTML onload="f()"

This is my javascript file:

var num = 0;function f() {	var node = document.createElement("div");	var input = document.createElement("input");	var span = document.createElement("span");	input.setAttribute("name", "o" + num);	input.setAttribute("maxlength", "77");	input.setAttribute("placeholder", "Enter poll option...");	span.appendChild(document.createTextNode(num + 1 + "."));	node.appendChild(input)	node.appendChild(span);	document.getElementById("options").appendChild(node);	var last = document.querySelector("input[name='o" + num + "']");	//last.removeEventListener('input', f);	last.addEventListener('input', f);	num++;}function l() {	for(var i = 0; i < 4; i++)		f();}

What works is whenever a user types into an input another is created(function gets called). But I want to remove the event listener from the previous input it was added to when making a new one. So only the last text box on the page would end up calling the function. Then I will also need a way to store the boolean value of that last input on the page of whether or not it has been inputted to yet(default value = false).

Link to comment
Share on other sites

Link to post
Share on other sites

-snip-

this could work:

first you check if there is an input, and if there is you remove its listener.

then you insert the new input

function f() {	var last = document.querySelector("input[name=o" + num + "]");	//var last = document.getElementsByTagName("input").getElementsByName("o" + num)[0];	if(last)	{		last.removeEventListener('input', f);	}	// move on to generating the next input	++num;	var node = document.createElement("div");	var input = document.createElement("input");	var span = document.createElement("span");	input.setAttribute("name", "o" + num);	input.setAttribute("maxlength", "77");	input.setAttribute("placeholder", "Enter poll option...");	span.appendChild(document.createTextNode(num + 1 + "."));	node.appendChild(input)	node.appendChild(span);	document.getElementById("options").appendChild(node);	input.addEventListener('input', f, false);}

edit: as for the boolean thing, you know that the last input of the page will never be inputted, because if it was then the script would generate another one which wouldn't be inputted

Link to comment
Share on other sites

Link to post
Share on other sites

this could work:

first you check if there is an input, and if there is you remove its listener.

then you insert the new input

function f() {	var last = document.querySelector("input[name=o" + num + "]");	//var last = document.getElementsByTagName("input").getElementsByName("o" + num)[0];	if(last)	{		last.removeEventListener('input', f);	}	// move on to generating the next input	++num;	var node = document.createElement("div");	var input = document.createElement("input");	var span = document.createElement("span");	input.setAttribute("name", "o" + num);	input.setAttribute("maxlength", "77");	input.setAttribute("placeholder", "Enter poll option...");	span.appendChild(document.createTextNode(num + 1 + "."));	node.appendChild(input)	node.appendChild(span);	document.getElementById("options").appendChild(node);	input.addEventListener('input', f, false);}

edit: as for the boolean thing, you know that the last input of the page will never be inputted, because if it was then the script would generate another one which wouldn't be inputted

Thanks so much, this works great. I am going to have to actually learn javascript eventually though :P Now onto changing the fact the form accepts a different amount of input other than the hardcoded for loop I was using before :)

Link to comment
Share on other sites

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×