ユーザー入力からJS関数への出力

Question

私は、HTMLファイル内からユーザー入力を受け取り、変換してプロンプトではなく<input>を使用してページに出力しようとしています。

これまで私がこれまで持っていたことは次のとおりです。

function bhedTester() { 
    alpha = "ABC"; 
    bhed = "JYI"; 

    btext = ""; 
    i = 0; 

    while (i < norm.length) { 
     ind = alphabet.indexOf(norm.charAt(i)); 
     btext = btext + bhed.charAt(ind); 
     i++; 
    } 
    btext 
} 

私はpromptコマンドを使用して、これをテストしてみた、それが動作しますが、私は

document.getElementById 

OR

document.form_name._input_name.value 

を使用して、どちらが動いていないようにみえことを返すために行くとき。

誰も助言できますか？

Answer 1

あなたがしなければならないだろうDIVに書き込むために：

document.getElementById("yourDiv").innerHTML= bhedTester(); 

その後、あなたが書いた関数から文字列を返す必要があります。

今すぐ何も返されません。

だからあなたのコードは次のようになります。私はあなたのnormとalphabetはあなたに正確な解を与えることができないかわからないので

function bhedTester() { 
    alpha = "ABC"; 
    bhed = "JYI"; 

    btext = ""; 
    i = 0; 

    while (i < norm.length) { 
     ind = alphabet.indexOf(norm.charAt(i)); 
     btext = btext + bhed.charAt(ind); 
     i++; 
    } 
    return btext; 
} 

。

Answer 2

DOMイベントからこの関数をトリガーする場合は、btextを返す必要があります。

function bhedTester() { 
    var alpha = "ABC"; 
    var bhed = "JYI"; 

    var btext = ""; 
    var i = 0; 

    while (i < norm.length) { 
    var ind = alphabet.indexOf(norm.charAt(i)); 
    btext = btext + bhed.charAt(ind); 
    i++; 
    } 
    return btext 
} 

Answer 3

入力時にテキストが変更されたとき、またはボタンがクリックされたときに聴く必要があります。あなたのコードは、ページが読み込まれたときに実行されます。テキストを入力するときに魔法のように動作することはありません。ユーザーがテキストを変更したときに実行するように変更する必要があります。したがって、イベントをバインドするにはaddEventListenerを使用する必要があります。

//bind the change event 
 
document.getElementById("foo").addEventListener("change", function(){ 
 
    var textbox = this, //reference the textbox 
 
     value = this.value; //get what the user typed 
 
    document.getElementById("bar").innerHTML = value; //set the value 
 
});

<input type="text" id="foo" /> 
 
<div id="bar" />

今、あなたは、ユーザーが入力したときkeyUpイベントを使用するよりも、それを実行したい場合。