为什么我只能从输入中获取默认值？

Question

我是JS的新手，我正在写这个小功能，可以接受用户的任何输入，然后将文本包装在最长的单词的长度处。 一切顺利，除了我只能得到输入的默认值，而不是有人输入的真实文本。 我的代码是：

 var inputString = document.getElementById("input").value; var inputArray = inputString.split(" "); var outputEl = document.getElementById("output"); // find the number of letters in the longest word: function longest(inputString) { let longestWord = 0; for (var i = 0; i < inputArray.length; i++) { if (longestWord < inputArray[i].length) { longestWord = inputArray[i].length } } return longestWord } var numberOfLetters = longest(inputString); // wrap the text function wrap(input, numberOfLetters) { let lineLength = 0; for (var i = 0; i < inputArray.length; i++) { if (lineLength + inputArray[i].length <= numberOfLetters) { outputEl.innerHTML += inputArray[i] + " "; lineLength += inputArray[i].length + 1 // because there's a space } else { outputEl.innerHTML += "<br>" + inputArray[i] + " "; lineLength = inputArray[i].length + 1 // space } } }

 <h3>Text Wrapper</h3> <p id="instructions">We will break your text at the length of your longest word!</p> <p>Enter Text: <input type="text" id="input" value="put your text here" size='50'></p> <button onclick="wrap(input.value,numberOfLetters)">Yeah, click me</button> <p id="output"></p>

如果我在控制台中键入input.value，它将返回我输入的值； 但是如果我要求输入字符串，它将返回默认值。 我只是不知道这里出了什么问题？ 有人可以帮我吗？ 很抱歉，如果这是一个愚蠢的错误，我只是想不通。 提前致谢！

Answer 1

欢迎来到stackoverflow！

如注释所示，您需要根据输入的当前值设置变量值。 您当前的代码在加载时设置了变量，因此将它们设置为默认值并保持不变。 尝试：

 var outputEl = document.getElementById("output"); // find the number of letters in the longest word: function longest(inputArray) { let longestWord = 0; for (var i = 0; i < inputArray.length; i++) { if (longestWord < inputArray[i].length) { longestWord = inputArray[i].length } } return longestWord } // wrap the text function wrap(inputString) { var inputArray = inputString.split(" "); var numberOfLetters = longest(inputArray); let lineLength = 0; for (var i = 0; i < inputArray.length; i++) { if (lineLength + inputArray[i].length <= numberOfLetters) { outputEl.innerHTML += inputArray[i] + " "; lineLength += inputArray[i].length + 1 // because there's a space } else { outputEl.innerHTML += "<br>" + inputArray[i] + " "; lineLength = inputArray[i].length + 1 // space } } }

 <h3>Text Wrapper</h3> <p id="instructions">We will break your text at the length of your longest word!</p> <p>Enter Text: <input type="text" id="input" value="put your text here" size='50'></p> <button onclick="wrap(document.getElementById('input').value)">Yeah, click me</button> <p id="output"></p>

注意，我将所有变量实例都移到了wrap函数中。 我将“最长”函数更改为接受inputArray作为其参数，因为这是它实际使用的（不是inputString）-这样，它不需要全局变量。 我也确保按钮onclick中的wrap调用通过其id和pass值来标识输入，然后“ wrap”函数只需要这个inputString即可进行处理。

Answer 2

脚本块仅执行一次，因此为什么在单击按钮时始终获得相同的值。 将其移至回调函数（每次单击都会执行）可解决此问题。 这是您需要的工作示例：

<body>

<h3>Text Wrapper</h3>
<p id="instructions">We will break your text at the length of your longest word!</p>
<p>Enter Text: <input type="text" id="input" value="put your text here" size='50'></p>
<button onclick="wrap(input.value)">Yeah, click me</button>
<p id="output"></p>

<script>


// find the number of letters in the longest word:
function longest(inputString){
    var inputArray = inputString.split(" ");
    let longestWord = 0; 
    for (var i = 0; i < inputArray.length; i++ ) {
        if (longestWord < inputArray[i].length) {
            longestWord = inputArray[i].length
        }    
    }
    return longestWord
}



// wrap the text
function wrap(inputString) {
    var numberOfLetters = longest(inputString);
    var inputArray = inputString.split(" ");
    var inputString = document.getElementById("input").value;
    var outputEl = document.getElementById("output");

    let lineLength = 0;
    for (var i = 0; i < inputArray.length; i++) {
        if (lineLength + inputArray[i].length <= numberOfLetters){
            outputEl.innerHTML += inputArray[i] + " ";
            lineLength += inputArray[i].length + 1 // because there's a space
         } else {
            outputEl.innerHTML += "<br>" + inputArray[i] + " ";
            lineLength = inputArray[i].length + 1 // space
        }
    }    

}




</script>
</body>

为什么我只能从输入中获取默认值？

问题描述

2 个解决方案

解决方案1
0 已采纳 2019-02-22 20:02:28

解决方案2
0 2019-02-22 20:07:02

为什么我只能从输入中获取默认值？

问题描述

2 个解决方案

解决方案1 0 已采纳 2019-02-22 20:02:28

解决方案2 0 2019-02-22 20:07:02

解决方案1
0 已采纳 2019-02-22 20:02:28

解决方案2
0 2019-02-22 20:07:02