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

我看到你的代码有两个主要的问题，因为它代表：

您目前唯一集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（）{ “use strict”; var theResult = word [0] + word.slice（1，-1）.length + word [word.length - 1]; （word.length> 10）{document.getElementById（“result”）。innerHTML = theResult; } }; –

@MohamedMahmoudElkassas将代码拆分为单独的文件不会改变它的运行方式，但是对于大块代码来说，这是一个很好的习惯。你已经解决了第2个问题，但使用该页面的人可能不知道为什么他们看不到结果（这可能是也可能不是你的问题，我不知道）。你还没有解决问题1 - 定义'word'的代码行需要在你的点击处理函数中，否则你只能设置一次'word'的值，而不是每次单击该按钮时。 – Timespace

javascript NaN问题

回答

相关问题