HTML DOMプロパティを入力に入力する

単純な入力があり、その下に段落があります。「document.readyState」のようなHTML DOMプロパティを渡して、の下の<p>タグ内の値を取得します。コード私はそれをしましたHTML DOMプロパティを入力に入力する

<!DOCTYPE html> 
<html> 
<body> 
<input type="text" onkeyup="affiche(this.value)"> 
<p id="message"></p> 
<script> 
function affiche(b) { 
document.getElementById("message").innerHTML = b ; 
} 
</script> 
</body> 
</html>

入力フィールドは文字列として返されるので、動作しません。

<!DOCTYPE html> 
<html> 
<body> 
<input type="text" onkeyup="affiche(this.value)"> 
<p id="message"></p> 
<script> 
function affiche(b) { 
document.getElementById("message").innerHTML = document.readyState ; 
} 
</script> 
</body> 
</html>

それはそのように動作しますが、私がしたい：毎回私は、入力フィールドにテキストを入れて、それは私に<p>タグ内の値を示し、あなたの質問は非常に明確ではないが、あなたのコメントで

出典

2016-05-01 Seif Eddine Slimen

を使用することができますしてくださいあなたの所望の出力の一例を示す[編集]あなたの質問、それはあなたがしようとしているかは明らかではありませんので、達成する。 'affiche（）'関数の2番目のバージョンでは入力からの値は使われないので、ユーザが何かをタイプするといつでも、現在の 'document.readyState'を表示するようにメッセージ段落が更新されます。「完了」で入力の値を表示するために段落を更新しようとしていますか？* 'document.readyState'？ – nnnnnn

**両方のソリューションが動作します：**最初のコードスニペットでは、入力の値（文字列）を取得し、段落（文字列）に配置します。型変換も必要ありません。 – Aloso

@nnnnnn：最初の例では「完全」という単語を表示します。私は何でも '文書がほしいですか？'私はそれが私の値を示している入力を入力 –

：

「ドキュメントは何ですか？」私は

が...あなたは、ユーザが入力へdocumentプロパティの名前を入力することができ、その後の値を持つようにしたいと言っているように見えるの下に、それは私にその値を示した入力に入力しますそのプロパティはparagraph要素に表示されます。したがって、「readyState」と入力すると、段落に「完了」と表示されます。その場合は、次のコードは、それを行います：ユーザーの種類、有効なプロパティ文字列でない値は「未定義」場合に表示されることを

function affiche(propName) { 
    document.getElementById("message").innerHTML = document[propName]; 
}

注意を。

デモ：https://jsfiddle.net/fevnsamr/

更新：

i 'はreadyStateの' を入力すると、それは私に値を示しており、i 'はdocument.readystateで' を入力すると、それはないですか？入力された

を評価するための唯一の実用的な方法任意のオブジェクトのプロパティは、eval() functionである：

function affiche(propName) { 
    var p = document.getElementById("message"); 
    try { 
    p.innerHTML = eval(propName); 
    } catch(e) { 
    p.innerHTML = "invalid"; 
    } 
}

ユーザーは構文を与える何かを入力することがあるので、私はのtry/catchを追加しました評価したときにエラー。

デモ：https://jsfiddle.net/fevnsamr/2/

注：今すぐ「eval()は悪である」というコメントを誘惑皆様へ - いいえ、それはないが、それはただのツールです。ほとんど常に仕事のための間違ったツールですが、ここで唯一の実用的なオプションです。

出典

2016-05-01 01:24:46 nnnnnn

あなたの答えをありがとう、なぜ私は 'readyState'それは私に値を表示し、私は 'document.readyState'を入力したときに表示されません？ –

 var ipt = $('#ipt'); 
 
     var ptxt = $('#ptxt'); 
 

 
     function render(){ 
 
     var txt = ipt.val(); 
 
     ptxt.text(txt); 
 
     } 
 

 
     ipt.on('keyup',function(){ 
 
     render(); 
 
     }); 
 

 
     render();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="ipt"/> 
 
<p id="ptxt"></p>

出典

2016-05-01 01:28:14

Functionを使用してこの例を試してみてください。

function affiche(b) { 
 
    document.getElementById("message").innerHTML = new Function('return ' + b)(); 
 
}

<input type="text" onkeyup="affiche(this.value)" value="document.readyState" autofocus='' /> 
 
<p id="message"></p>

出典

2016-05-01 01:42:42 Arvind

あなたは、ユーザが入力した任意のコードを実行したい場合は、evalまたは同等が必要になります。

しかし、あなたは唯一のプロパティのルックアップが必要な場合、あなたは

document.querySelector('input').addEventListener('input', function() { 
 
    var p = document.getElementById("message"); 
 
    try { 
 
    p.textContent = this.value.split('.').reduce(function(obj, prop) { 
 
     return obj[prop]; 
 
    }, window) + ''; 
 
    } catch(e) { 
 
    p.innerHTML = '<span class="error">Invalid</span>'; 
 
    } 
 
});

.error { color: red; }

<input type="text" /> 
 
<p id="message"></p>

出典

2016-05-01 01:56:27 Oriol

HTML DOMプロパティを入力に入力する

答えて

関連する問題