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！

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

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和传递值来标识输入，然后“包装”函数仅需要该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 个答案: