你可以獲得文本值的上下文嗎？

所以我有一個輸入表單需要在某個點不可見。所以我使用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>

來源

2017-10-06 user8570650

你可以通過簡單地聲明一個變量，說var nameInput，然後將DOM節點分配給它：

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

請注意，您應該不是正在使用name，因爲它是一個implementation-dependent reserved keyword in JavaScript。

要訪問其樣式對象，只需使用nameInput.style...即可。 nameInput.style.visibility = 'visible'如果你想更新visibility屬性。

如果你想找回它的價值，你可以這樣做：

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是沒有反應意義上說，你動態更新變量時，用戶與頁面交互。政權是這樣的：

用戶觸發某種事件。在這種情況下，您希望收聽onInput，onChange,onBlur ...事件
在您的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;" />

來源

2017-10-06 11:15:48 Terry

感謝您的回覆。但它似乎控制檯登錄之前，我已經輸入任何東西，所以價值總是「」 – user8570650

@ user8570650這是因爲JS是沒有反應。如果您想在用戶輸入內容時獲得該值，您需要[將事件監聽器綁定到它]（https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener）。 – Terry

Oh ok Thanks）） – user8570650

如果我正確地理解你的問題，你的問題現在是讓輸入值，因爲你已經擁有的代碼以使其可見。

所以，你需要做的是一個處理程序添加到您輸入的時刻來執行的功能要檢索的值的用戶類型，在上，比如改變：

HTML：

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

的Javascript：

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

希望這有助於！

來源

2017-10-06 11:22:38 DiegoTArg

你不應該使用內聯JS來綁定事件監聽器。 – Terry

你可以獲得文本值的上下文嗎？

回答

相關問題