ユーザーの入力値を関数に挿入する

これはおそらく簡単な質問ですが、私はWeb開発の初心者です。私は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>

出典

2016-07-24 Finn Nilson

こんにちは、あなたがクリックされたとき、それは、入力値をリセットすることにしたいですか？ –

基本的にはい、それはユーザー入力が関数で使用できるということでした。 –

あなたはそれを取得して（ただし、ボタンのクリック後に呼び出される関数内）同じ変数に割り当てることで、再入力の値を取得することができます。

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;

編集：それはあまりにも入力を必要とするnegKeyword()関数に同じコードを追加しました。

出典

2016-07-24 20:15:16 yuriy636

これは、感謝しました！ –

しかし、最も良い解決策ではなく、DOMからの入力値を読み返す代わりに、イベントリスナーで 'this'オブジェクトを使用し、その値を（パラメータとして）必要な関数に渡す必要があります。 – trincot

実際、できるだけコードを変更したかっただけです。 – yuriy636

可変入力が常に ""であるため、機能しません。ボタンをクリックするたびに新しい値を割り当てる必要があります。私はBooleanKeyword（）関数で入力用のコードを移動しました。今はすべて正常に動作しています。

このような何かがうまくいかないときは、毎回ログ/アラート値を入力してください。

たとえば、あなたは警告することができます（input + '' + 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>

出典

2016-07-24 20:27:29

ユーザーの入力値を関数に挿入する

答えて

関連する問題