javascript NaN発行

-3

私はコードを書く必要があります。10文字以上の単語を以下のように省略します：localiztion - > l10n。私はこれを行うためにjavascriptを使用しましたが、NaNエラーです。javascript NaN発行

<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Way Too Long Words</title> 
</head> 
<body> 

     <input type="text"> 
     <button>abbreviate</button> 
     <div id="result"></div> 

<script> 

    var word = document.querySelector('input').value.split(''); 

    document.querySelector("button").onclick = function() { 
    "use strict"; 
    var theResult = word[0] + word.slice(1, -1).length + word[word.length - 1]; 

     document.getElementById("result").innerHTML = theResult; 
}; 
</script> 
</body> 
</html>

、そのまま

出典

2016-08-24 Mohamed Mahmoud Elkassas

は、私はあなたのコードを持つ2つの大きな問題を参照してください。この問題を克服する方法：文書がロードされたとき

あなたは現在、一度だけwordの値を設定し、。これは、ボタンがクリックされるたびに発生します。
現在、wordが10文字より長いことを確認していないので、theResultを計算してみてください。

二つの問題の組み合わせは、上記wordは、ページが読み込まれるとすぐに空の文字列に設定されており、ボタンをクリックすると、常にtheResultがNaNであることになりますことを意味します。

出典

2016-08-24 15:44:26 Timespace

jsをhtmlファイルという別のファイルに配置しようとしました。コードに var word = document.querySelector（ 'input'）が含まれています。。値; document.querySelector（ "button"）。onclick = function（）{ "厳密に使用する"; var theResult = word [0] + word.slice（1、-1）.length + word [word.length - 1]; if（word.length> 10）{ document.getElementById（ "result"）。innerHTML = theResult; } }; –

@MohamedMahmoudElkassasコードを別のファイルに分割しても、コードの実行方法は変わりませんが、大量のコードを取得するのは良い習慣です。あなたは問題2を解決しましたが、そのページを使用している人がなぜ結果を見ることができないのか分からないことがあります（これはあなたには問題ではないかもしれませんが、わかりません）。あなたは問題1を解決していませんが、 'word'を定義するコード行はクリック処理関数内にある必要があります。そうでなければ、ボタンがクリックされるたびにではなく' word'の値を1回だけ設定します。 – Timespace

答えて

関連する問題