web-dev-qa-db-ja.com

ユーザー入力をhtmlおよびjsの変数に保存する方法

私はゲームを作っていますが、最初はあなたの名前を尋ねます。この名前を変数として保存してください。私はこのHTMLコードを持っています：

<form id="form" onsubmit="return false;">
<input   style=position:absolute;top:80%;left:5%;width:40%; type="text" id="userInput">
<input   style=position:absolute;top:50%;left:5%;width:40%; type="submit"    onclick="name()">
</form>

そして、これはjavascriptの一部です：

function name()
{
var input = document.getElementById("userInput");
alert(input);
}
javascripthtmluser-input
12
Hamzah Malik

nameはJavaScriptの予約語であるため機能しません。関数名を別のものに変更します。

http://www.quackit.com/javascript/javascript_reserved_words.cfm を参照してください

<form id="form" onsubmit="return false;">
    <input style="position:absolute; top:80%; left:5%; width:40%;" type="text" id="userInput" />
    <input style="position:absolute; top:50%; left:5%; width:40%;" type="submit" onclick="othername();" />
</form>

function othername() {
    var input = document.getElementById("userInput").value;
    alert(input);
}
18
PiLHA

まず、マークアップをよりポータブル/再利用可能にします。また、onsubmit属性を使用する代わりに、ボタンのタイプを'button'に設定します。フォームがサーバーと対話する必要がある場合は、type属性をsubmitに切り替えることができます。

<div class='wrapper'>
<form id='nameForm'>
<div class='form-uname'>
    <label id='nameLable' for='nameField'>Create a username:</label>
    <input id='nameField' type='text' maxlength='25'></input>
</div>
<div class='form-sub'>
    <button id='subButton' type='button'>Print your name!</button>
</div>
</form>

<div>
    <p id='result'></p></div>
</div>

次に、ユーザー名を変数に取得するための一般的な関数を記述します。ユーザー名を保持する変数に3文字以上含まれていることを確認します。これを任意の定数に変更できます。

function getUserName() {
var nameField = document.getElementById('nameField').value;
var result = document.getElementById('result');

if (nameField.length < 3) {
    result.textContent = 'Username must contain at least 3 characters';
    //alert('Username must contain at least 3 characters');
} else {
    result.textContent = 'Your username is: ' + nameField;
    //alert(nameField);
}
}

次に、ボタンのイベントリスナーを作成しました。一般に、インラインjs呼び出しを持つのは悪い習慣と考えられています。

var subButton = document.getElementById('subButton');
subButton.addEventListener('click', getUserName, false);

これは、実用的で軽快なスタイルのデモです。

この回答のCodePenデモ

7
NickersF

PHPおよびJavaScriptで使用するように：

<input type="hidden" id="CatId" value="<?php echo $categoryId; ?>">

JavaScriptを更新します。

var categoryId = document.getElementById('CatId').value;
1
Amranur Rahman

JavaScriptを次のように変更します。

var input = document.getElementById('userInput').value;

これにより、DOMオブジェクトではなく、テキストボックスに入力された値が取得されます。

1
Tom G

私にとってこれが最もうまくいくことがわかりました https://jsfiddle.net/Lu92akv6/ [私はこのフィドルを試してみて、このフィドルを試してみました] [1]

document.getElementById("btnmyNumber").addEventListener("click", myFunctionVar);
function myFunctionVar() {
  var numberr = parseInt(document.getElementById("myNumber").value, 10);
  // alert(numberr);
  if ( numberr > 1) {

    document.getElementById("minusE5").style.display = "none";



}}
   <form onsubmit="return false;">
       <input class="button button3" type="number" id="myNumber" value="" min="0" max="30">
       <input type="submit" id="btnmyNumber">

       </form>
0
Joshua