Finn Nilson Finn Nilson - 4 months ago 14
HTML Question

Inserting User Input Values into a Function

I realize this is probably an easy question, but I am new to web development, so bare with me. I am trying to take a user input value that is entered through an html input box, and have it as a value within my function (the negKeyword function in my code to be more specific). The problem that I think is happening is this input value is stored as a variable, so when the code is first stored in memory it is stored as "", since the user has not inputed anything yet. How do I get it so when the user inputs something it replaces blank or "" with what ever the user inputs?

What I basically want to happen next is the user will click a button, it will then compare what the user inputs to what the "negKeyword" function outputs and give a result on whether they match or not (this action is demonstrated in my booleanKeyword function in my code).

Here is my code.



var input = document.getElementById("input").value;
var arr = ['no', 'not', 'checked'];
var text = ''; //JS output variable.
var keyword = 'leak'; //Individual keyword.

function negKeyword() {

for (i = 0; i < arr.length; i++) {

if (text == input) { break; }
text = arr[i] + ' ' + keyword;

}
return text;
}

function booleanKeyword() {

if (input == negKeyword()) {

document.getElementById("result").style.color="green";
document.getElementById("result").innerHTML="Match";

} else {

document.getElementById("result").style.color="red";
document.getElementById("result").innerHTML="No Match";

}

}

document.getElementById("result2").innerHTML=keyword;

<label for="Full Negative Keyword">Negative Keyword</label> <input id="input" type="text" />

<div id="message">Result: <span id="result"></span></div>
<div id="message">Keyword: <span id="result2"></span></div>

<button id="test" onclick="booleanKeyword()">Click to Test</button>




Answer

You can retrieve the input's value again, by getting it and assigning to the same variable (but inside the function that is called after the button click).

var input = document.getElementById("input").value;
var arr = ['no', 'not', 'checked']; 
var text = ''; //JS output variable.
var keyword = 'leak'; //Individual keyword.

function negKeyword() {

  input = document.getElementById("input").value;
		
  for (i = 0; i < arr.length; i++) {
	
	if (text == input) { break; }	
	text = arr[i] + ' ' + keyword;
	
	}
	return text;
}
	
function booleanKeyword() {	

        input = document.getElementById("input").value;//The variable is reassigned, only after the click

	if (input == negKeyword()) { 
		
		document.getElementById("result").style.color="green";
		document.getElementById("result").innerHTML="Match";
	
	} else {
	
		document.getElementById("result").style.color="red";
		document.getElementById("result").innerHTML="No Match";
	
	}
	
}

document.getElementById("result2").innerHTML=keyword;

Edit: added the same code to negKeyword() function as it requires the input too.