JavaScript関数/イベントリスナーが正しく機能していません

私はJavaScriptを初めて使っています。なぜこれが動作しないのか分かりません。入力ボックスをクリックして5文字未満を入力すると、メッセージが表示されます。メッセージは表示されません。ソース・コード：あなたのコードでhttps://jsfiddle.net/015por64/JavaScript関数/イベントリスナーが正しく機能していません

<html> 
 
    <body> 
 
    <form id="form>"> 
 
     <input id="input"> 
 
     <div id="text"> Test </div> 
 
     </input> 
 
     </form> 
 
    </body> 
 
</html> 
 

 
<script> 
 
function checkUserName(e, minLength) { 
 
    var username = document.getElementById("input"); 
 
    var usernameLength = username.textContent; 
 
    if (usernameLength.value.length < 5) { 
 
     msg = "Your username must consist of at least five characters." 
 
    }; 
 
    else { 
 
     msg = ""; 
 
     text.innerHTML=msg 
 
    }; 
 
} 
 
var text = document.getElementById("text"); 
 
text.addEventListener("blur", function(e) {checkUserName(e, 5)}, false) 
 
</script>

出典

2017-08-06 Christoffer Corfield Aakre

'input'要素の場合は、' textContent'の代わりに 'value'プロパティを読んでください。また、 'input'はvoid要素であり、終了タグはありません。 – undefined

ありがとうございますが、textContentをvalueに変更しても動作しません。 –

なぜあなたは 'div'要素の' blur'イベントを聞いていますか？入力の 'keyup'イベントを聞くべきです。 – undefined

いくつかの問題：あなたは#inputなくdiv#textにイベントを添付する必要が

。
あなたは#inputの値ではなくtextcontent
;その後、他の構文エラーを与えるので、間違っている場合は後を読む必要があります。

<html> 
 
    <body> 
 
    <form id="form>"> 
 
     <input id="input"> 
 
     <div id="text"> Test </div> 
 
     </input> 
 
     </form> 
 
    </body> 
 
</html> 
 

 
<script> 
 
function checkUserName(e, minLength) { 
 
    var username = document.getElementById("input"); 
 
    var usernameLength = username.value; 
 
    if (usernameLength.length < 5) { 
 
     msg = "Your username must consist of at least five characters."; 
 
     text.innerHTML=msg; 
 
    }else { 
 
     msg = ""; 
 
     text.innerHTML=msg; 
 
    }; 
 
} 
 
var text = document.getElementById("text"); 
 
document.getElementById('input').addEventListener("blur", function(e) {checkUserName(e, 5);}, false) 
 
</script>

出典

2017-08-06 22:07:48 Dij

ありがとう、これはそれを修正！ Apparantly、私は7分間の答えを受け入れることができませんが、私はできることができます。再度、感謝します：） –

それはあなたがぼかしイベントリスナーを配置する必要があります入力してください。

var input = document.getElementById("input");

そして、あなたは、関数の外textのための使用を持っていないので、より良い内部のそれを定義します。

出典

2017-08-06 22:09:13 Jed

JavaScript関数/イベントリスナーが正しく機能していません

答えて

関連する問題