Вставка значений входных данных пользователя в функцию

Question

Я понимаю, что это, вероятно, простой вопрос, но я новичок в веб-разработке, так голый со мной. Я пытаюсь ввести значение пользовательского ввода, которое вводится через поле ввода html, и иметь его как значение в моей функции (функция negKeyword в моем коде будет более конкретной). Проблема, которая, как мне кажется, происходит, заключается в том, что это входное значение сохраняется как переменная, поэтому, когда код сначала сохраняется в памяти, он сохраняется как «», так как пользователь еще ничего не вводил. Как мне это получить, когда пользователь вводит что-то, что заменяет пустой или «» тем, что когда-либо вводит пользователь?

Что я в основном хочу сделать дальше, так это то, что пользователь нажмет кнопку, затем сравните то, что пользователь вводит в функцию «negKeyword», и дает результат о том, соответствуют ли они или нет (это действие продемонстрировано в моей функции booleanKeyword в моем коде).

Вот мой код.

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

 
function negKeyword() { 
 
\t \t 
 
for (i = 0; i < arr.length; i++) { 
 
\t 
 
\t if (text == input) { break; } \t 
 
\t text = arr[i] + ' ' + keyword; 
 
\t 
 
\t } 
 
\t return text; 
 
} 
 
\t 
 
function booleanKeyword() { \t 
 

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

 
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 1

Вы можете получить значение на вход снова, получая ее и назначение той же переменной (но внутри функции, которая вызывается после нажатия кнопки).

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; 
 
\t \t 
 
    for (i = 0; i < arr.length; i++) { 
 
\t 
 
\t if (text == input) { break; } \t 
 
\t text = arr[i] + ' ' + keyword; 
 
\t 
 
\t } 
 
\t return text; 
 
} 
 
\t 
 
function booleanKeyword() { \t 
 

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

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

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

Edit: добавлен один и тот же код для negKeyword() функции, как это требует ввода тоже.

Answer 2

Он не работает, потому что ваш переменный вход всегда «". Вы должны назначать новое значение при каждом нажатии кнопки. Я просто переместил ваш код для ввода в функцию BooleanKeyword(). Теперь все работает нормально.

Каждый раз, когда что-то вроде этого не работает, просто попробуйте ввести значения журнала/предупреждения.

Например, вы можете просто предупредить (ввод + '' + negKeyword()); поверх функции booleanKeyword(), и вы увидите проблему самостоятельно.

var input; 
 
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() { 
 
    input = document.getElementById("input").value; 
 
    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;

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
</head> 
 
<body> 
 
<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> 
 

 
</html>