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
  • Получилось, спасибо! А что на счет лога дважди?
    – galizien
    3 мая 2021 в 10:24
  • один раз срабатывает click из атрибутов элемента, один раз из addEventListener. в любом месте уберите
    – splash58
    3 мая 2021 в 10:28

Ваш ответ

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

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