1

У меня есть код, который при клике на букву выводит слово на которую оно начинается. Но если у меня нет слова, которое начинается на "q" - ошибка Uncaught TypeError: startsWith[0] is undefined. Как ее убрать, а вместо нее написать "нету такого слова"? Кликните на f - будет "finish", q - "TypeError: startsWith[0] is undefined"

function click() {
     let letters = document.getElementsByClassName("specific-letter");
     for (let i = 0; i < letters.length; i++) {
          letters[i].addEventListener("click", clickDiv, false);
     }
}

function clickDiv() { //On click setting letter to variable
     let clickedDiv = this.innerHTML;
     let result = document.getElementById("arr");
     let arrobj = [{ "name": 'finish' }, { "name": 'egg' },{ "name": 'good' },{ "name": 'irish' },{ "name": 'chicken' }];   

          const startsWith = arrobj.filter((option) => option.name.startsWith(clickedDiv));  // Finds a word in array which starts on clicked letter
     let myLetter = startsWith[0].name;
      if (startsWith === undefined) {
          console.log("No matches found");
     }
     console.log(myLetter);
 
}
click();
<div class="displayed-array" id="generated-array">
    <div class="specific-letter" onclick="click()">f</div>
    <div class="specific-letter" onclick="click()">i</div>
    <div class="specific-letter" onclick="click()">e</div>
    <div class="specific-letter" onclick="click()">g</div>
    <div class="specific-letter" onclick="click()">c</div>
    <div class="specific-letter" onclick="click()">q</div>
</div>

P.S почему оно ложит дважды?

1 ответ 1

1

Проверить, что что-то нашлось стоит сразу

function click() {
     let letters = document.getElementsByClassName("specific-letter");
     for (let i = 0; i < letters.length; i++) {
          letters[i].addEventListener("click", clickDiv, false);
     }
}

function clickDiv() { //On click setting letter to variable
     let clickedDiv = this.innerHTML;
     let result = document.getElementById("arr");
     let arrobj = [{ "name": 'finish' }, { "name": 'egg' },{ "name": 'good' },{ "name": 'irish' },{ "name": 'chicken' }];   

          const startsWith = arrobj.filter((option) => option.name.startsWith(clickedDiv));  // Finds a word in array which starts on clicked letter
if (startsWith.length) {       
let myLetter = startsWith[0].name;
     console.log(myLetter);
}
else {
  
          console.log("No matches found");
}

 
}
click();
<div class="displayed-array" id="generated-array">
    <div class="specific-letter" onclick="click()">f</div>
    <div class="specific-letter" onclick="click()">i</div>
    <div class="specific-letter" onclick="click()">e</div>
    <div class="specific-letter" onclick="click()">g</div>
    <div class="specific-letter" onclick="click()">c</div>
    <div class="specific-letter" onclick="click()">q</div>
</div>

2
  • Получилось, спасибо! А что на счет лога дважди?
    – oleh.bdn
    3 мая 2021 в 10:24
  • один раз срабатывает click из атрибутов элемента, один раз из addEventListener. в любом месте уберите
    – splash58
    3 мая 2021 в 10:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.