Finn Nilson Finn Nilson - 1 year ago 61
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 Source

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.