2017-10-06 9 views
0

私は入力フォームを特定の点では見えないようにする必要があります。だから私はそれが見えるまで入力を隠すためにCSSとJavascriptを使います。私は、Pythonの背景から来て、私は何をしたいのようなものです:私はそのような何かをしようとしたが、それはただの変数への可視性の変化を割り当てテキスト値のコンテキストを取得できますか?

name = input("") 

。私は.valueを使ってみましたが、正しく動作させることはできません。

getContext(または類似のものがある場合)を取得できるかどうか、私はユーザーに何かを割り当てることができますか?あるいは、単にそれを変数に追加するだけで、必要なときに機能させることができます。

To give additional context I need the form to get the value the user has inputted when they click submit on the canvas

var gameOver = true; 
 
if (gameOver){ 
 
    document.getElementById('name').style.visibility = 'visible' 
 
    console.log(name) 
 
}
<html> 
 
<body> 
 
    <input id = "name" type="text" class="name" 
 
      style="visibility: hidden;"></input> 
 
</body> 
 
</html>

答えて

1

あなたは、単に変数を宣言することで、var nameInputを言うことを行い、それにDOMノードを割り当てることができます。

var nameInput = document.getElementById('name'); 

注ことではありませんnameであるため、implementation-dependent reserved keyword in JavaScriptです。

スタイルオブジェクトにアクセスするには、単にnameInput.style...を使用します。 visibilityプロパティを更新する場合は、nameInput.style.visibility = 'visible'を入力します。

あなたはそれが価値だ取得したい場合は、あなたがこれを行うことができます:あなたは、動的にユーザー入力として、その値を取得する場合

console.log(nameInput.value); 

var gameOver = true; 
 
if (gameOver) { 
 
    var nameInput = document.getElementById('name'); 
 
    nameInput.style.visibility = 'visible'; 
 
    console.log('DOM node: ' + nameInput); 
 
    console.log('Value: ' + nameInput.value); 
 
}
<input id="name" type="text" class="name" style="visibility: hidden;" />

を、あなたが必要となります.addEventListener()を使用してイベントバインディングを読み取る。 JSは、は反応しないです。つまり、ユーザーがページとやりとりしたときに変数を動的に更新するという意味です。体制はこれです:

  1. ユーザーは何らかのイベントを引き起こします。この場合、onInputonChangeonBlur ...イベントを聞きたい場合は、
  2. JSロジックでは、その要素から放出されたこのイベントをリッスンする必要があります。これは、イベントリスナーをDOMノードにバインドすることによって行われます。

var gameOver = true; 
 
if (gameOver) { 
 
    var nameInput = document.getElementById('name'); 
 
    nameInput.style.visibility = 'visible'; 
 
    console.log('DOM node: ' + nameInput); 
 
    console.log('Value: ' + nameInput.value); 
 
} 
 

 
nameInput.addEventListener('input', function() { 
 
    console.log('Updated value: ' + this.value); 
 
});
<input id="name" type="text" class="name" style="visibility: hidden;" />

+0

返信いただきありがとうございます。しかし、ボックスに何かを入力する前にログを記録するように見えるので、値は常に ""です – user8570650

+0

@ user8570650 JSは反応がないからです。ユーザーが何かを入力したときに値を取得するには、[イベントリスナーをバインドする]必要があります(https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)。 – Terry

+0

ありがとう)) – user8570650

0

私が正しくあなたの質問を理解していれば、あなたはすでにそれを見えるようにするコードを持っているので、あなたの問題は今、入力値を取得することです。

だから、あなたが何をする必要があるか、あなたが値を取得したい瞬間に機能を実行するために、あなたの入力にハンドラを追加することで、ユーザタイプ-で、インスタンスの変更について:

HTML:

<input id = "name" type="text" class="name" 
     style="visibility: hidden;" onchange="inputChanged();"></input> 

Javascriptを:

function inputChanged() { 
    console.log(document.getElementById('name').value); 
} 

は、この情報がお役に立てば幸い!

+0

イベントリスナーをバインドするためにインラインJSを使用すべきではありません。 – Terry

関連する問題