Jestem super nowy w JS, a ja piszę tę małą funkcję, która ma wziąć dowolne wejście od użytkownika i owinąć tekst na długość najdłuższego słowa. Wszystkie rzeczy poszły dobrze, z wyjątkiem, że mogę uzyskać tylko wartość domyślną wejścia, a nie prawdziwy tekst, który tam umieścił. Mój kod to:

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>

Jeśli wpisuję wejście. Walno w konsoli, zwraca wartość, w której się znajdowałem; Ale jeśli poprosiłem o wprowadzenie, zwraca wartość domyślną. Po prostu nie wiem, co tu poszło nie tak? Czy ktoś może mi pomóc? Przepraszam, jeśli to głupi błąd, po prostu nie mogłem tego zrozumieć. Z góry dziękuję!

0
YZ Lee 22 luty 2019, 22:53

2 odpowiedzi

Najlepsza odpowiedź

Witamy w stackoverflow!

Ponieważ komentarze sugerują, należy ustawić wartości zmiennych na podstawie wartości Wartość wejścia. Twój bieżący kod ustawia zmienne w czasie obciążenia, dzięki czemu są ustawione na wartość domyślną i pozostań w ten sposób. próbować:

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>

Zauważ, że przesunąłem całą zmienną instancję do wewnątrz funkcji wrap. Zmieniłem "najdłuższą" funkcję, aby zaakceptować Inputarray jako jego argument, ponieważ właśnie właśnie używa (nie wprowadzania) - w ten sposób nie potrzebuje zmiennej globalnej. Również upewniłem się wrap wezwanie do przycisku Onclick identyfikuje wejście przez swój identyfikator i wartość, a następnie funkcja "Wrap" wymaga tylko tego wejścia w celu wykonania procesu.

0
derelict 22 luty 2019, 20:13

Blok skryptu wykonuje tylko raz i dlatego zawsze otrzymasz tę samą wartość przy kliknięciu przycisku. Przenoszenie go do funkcji wywołania zwrotnego (który wykonuje za każdym razem, gdy klikniesz) rozwiązuje ten problem. Oto przykład roboczy tego, czego potrzebujesz:

<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>
0
Wildhammer 22 luty 2019, 20:07