Как мне активировать функцию со второй для вызова forEach?

ProgramBox

Как мне активировать функцию со второй для вызова forEach?

Post author:admin
Запись опубликована:3 апреля, 2023
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

 let words = [];
var longestCt = 0;
var longestWord = "";
var myList = [];
var myList = ['Loops','are','used','while','Learning JavaScript'];

function addWords() {
    let template = words.map(word => `<li>${word}</li>`).join('n');
    document.querySelector('ul').innerHTML = template;
}

addWords();

let btnAdd = document.querySelector('button');
let input = document.querySelector('input');


btnAdd.addEventListener('click', () => {
    words.push(input.value);
    input.value = '';
    addWords();
});

let findLong = document.querySelector('button');

findLong.addEventListener('click', () => {
   
    let longestCt = 0;
    let longestWord = "";

    words.forEach(function (value) {
        if (value.length > longestCt) {
            longestWord = value;
            longestCt = value.length;
        } else {
            longestWord = longestWord;
        }
    });

    //}
});
document.getElementById("demo2").innerHTML = longestWord;

 div {
    widows: 20%;
    margin: auto;
}

input, button {
    padding: 5px;
    display: inline-block;
}

li {
    font-size: 20px;
    font-weight: bold;
    margin-left: -40px;
    list-style: none;
}

 <!DOCTYPE html>

<head>

    <link rel="stylesheet" href="test_Arr_Input.css">
    <title>Test Longest Array.html</title>

</head>

<body>

<!--Thank you to YouTube KodeBase with my modifications adding a second button which isn't working-->

<div>

    <input type="text">

    <button>Add a Word</button>

    <ul></ul>

    <br>

    <button>Find the Longest</button>

    <p id="demo"></p>

</div>

<script type="text/javascript" src="test_Arr_Input.js"></script>

</body>

</html>

Полное раскрытие; Новичок. С учетом сказанного; заранее благодарю вас.

Я написал простой JavaScript для возврата самой длинной строки в массиве. Здесь это просто функция JavaScript, которую я запустил с консоли, не взаимодействуя с html:

 var myList = ['Loops','are','used','while','Learning JavaScript'];

var longestCt = 0;
var longestWord = "";

myList.forEach(function (value) {
    if (value.length > longestCt) {
        longestWord = value; longestCt = value.length;
    } else {
        longestWord = longestWord;
    }
});
console.log(longestWord);

I then endeavored to create an HTML page to enter objects into the array and to create a list.
(Thanks to KodeBase from Youtube for the direction). The JavaScript for this is posted at the end after the CSS. Here is the HTML:

 <!DOCTYPE html>

<head>

    <link rel="stylesheet" href="test_Arr_Input.css">
    <title>Test Longest Array.html</title>

</head>

<body>

<!--Thank you to YouTube KodeBase with my modifications adding a second button which isn't working-->

<div>

    <input type="text">

    <button>Add a Word</button>

    <ul></ul>

    <br>

    <button>Find the Longest</button>

    <p id="demo"></p>

</div>
  
    <button onclick="intoMyList()">Submit to the array</button>

    <p id="demo"></p>

    <button onclick="findTheLongest()">Find the Longest Word</button>

    <p id="demo2"></p>

<script type="text/javascript" src="test_Arr_Input.js"></script>

</body>

</html>

Вот CSS:

 div {
    widows: 20%;
    margin: auto;
}

input, button {
    padding: 5px;
    display: inline-block;
}

li {
    font-size: 20px;
    font-weight: bold;
    margin-left: -40px;
    list-style: none;
}

И вот окончательный JavaScript:

 let words = [];

function addWords() {
    let template = words.map(word => `<li>${word}</li>`).join('n');
    document.querySelector('ul').innerHTML = template;
}

addWords();

let btnAdd = document.querySelector('button');
let input = document.querySelector('input');


btnAdd.addEventListener('click', () => {
    words.push(input.value);
    input.value = '';
    addWords();
});

let findLong = document.querySelector('button');

findLong.addEventListener('click', () => {
    //function findTheLongest() {
    let longestCt = 0;
    let longestWord = "";

    myList.forEach(function (value) {
        if (value.length > longestCt) {
            longestWord = value;
            longestCt = value.length;
        } else {
            longestWord = longestWord;
        }
    });

    //}
});
document.getElementById("demo2").innerHTML = longestWord;

Сначала я изменил несколько имен переменных для большей ясности.

Но проблема в том, что, хотя я могу получить слова для ввода в массив, нажав первую кнопку, вторая кнопка, похоже, не вызывает функцию ForEach для запуска возврата самого длинного слова. Мне интересно, нужно ли мне как-то различать кнопки 1 и 2 в HTML. Или если мне просто нужно вернуться к чертежной доске, чтобы переосмыслить свое понимание того, как я собираю JS вместе.

Ответ №1:

Короче говоря, вам нужно присвоить каждой из ваших кнопок уникальный идентификатор, а затем вы можете использовать этот идентификатор для таргетинга на соответствующую кнопку в вашем коде.

 <button id="add-word">Add a Word</button>

 let btnAdd = document.querySelector('#add-word');

1. Добавление идентификатора по-прежнему позволяло работать первой части или элементам массива, но не forEach. Я также обнаружил неправильную строку, в которой у меня были слова с именем массива, но в forEach был myList. Я исправил это и перепечатал.

2. Спасибо. Это очень помогло после того, как я исправил неточность моего собственного кода.

Ответ №2:

Как упоминалось Jamiec, вы должны присвоить каждой кнопке свой собственный уникальный идентификатор и использовать getElementById для его целевого использования, или вы можете использовать onclick="function()" в html для прямого вызова функции из этого элемента

Текущая точка отказа также, похоже, читается в строке 27, myList.forEach когда это должно быть words.ForEach . Я изменил несколько строк и получил рабочий пример здесь для вас:https://jsfiddle.net/z7dsabLc/6 /

1. Спасибо. Я понял, что мой список был неправильным и находился в процессе исправления, когда вы ответили. Я сравнил ваш код с моим построчно и нашел 1. где вы добавили идентификаторы в двух местах. 2. где вы исправили мой список. 3. куда вы переместили оператор final document. (Меня все еще смущает это и размещение круглых скобок, фигурных скобок, точки с запятой. и 4. добавление строки «console.log(«Вызывается»)». Можете ли вы это объяснить? Просто для удовольствия я прокомментировал это и запустил программу, и в этом не было необходимости, поэтому мне было интересно, была ли это отладочная вещь, которую вы выполняли?

2. Для расширения ответа querySelect('button') выбирается ТОЛЬКО первый элемент button. С помощью консоли. После отладки был оставлен журнал, подтверждающий, что это было вызвано только с одной кнопки. Также с инструкцией final document она находилась за пределами findLong.addEventListener поэтому, хотя она нашла самое длинное слово, она не обновила документ правильно.