addEventListener: нажмите и удалите тег - PullRequest
Новая
       13

addEventListener: нажмите и удалите тег

0 голосов
/ 02 февраля 2019

Вот подробности случая, с которым я хочу получить некоторую помощь: 

    <section class='result'> </section>
some tags... when the input value found/not found

Я создаю ввод, чтобы найти какой-нибудь текст / статью, если значение ввода не может быть найдено, оно собираетсяshow:

извините, не могу найти input same value on box searching

И затем я пытаюсь нажать кнопку снова, этот текст повторяется снова и снова, когда я нажимаюbutton много раз ... 

sorry can't found 'input same value on box searching'
sorry can't found 'input same value on box searching'
sorry can't found 'input same value on box searching'
sorry can't found 'input same value on box searching'
sorry can't found 'input same value on box searching'

И т.д. ...

Я просто хочу, чтобы он показывался только один раз, и когда входной сигнал изменится, он не будет повторяться снова, и этопокажу новое другое значение: sorry cant... 'new input value'

То есть, когда входные данные не могут быть найдены, и когда входные данные найдены, после того, как я изменю входные данные в поле поиска, я хочуудалите этот текст sorry cant....

И затем отобразите данные статьи после того, как я ее нашел ...

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

Вот код: https://jsfiddle.net/cornloh/d2Lgkpxe/

const find = el => document.querySelector(el)
const create = el => document.createElement(el)

const lookingThem = find('.searchButton').addEventListener('click', (e) => {
  e.preventDefault()
  const inputText = find('.box').value.trim(); 
  // console.log(inputText.length);
  result(inputText);
})

const result = searching => {
  const wikipedia = `https://en.wikipedia.org/w/api.php?action=query&list=search&prop=info&inprop=url&utf8=&format=json&origin=*&srlimit=20&srsearch=${searching}`; // API
  fetch(wikipedia)
    .then(resolve => resolve.json())
    .then(data => {
      if(typeof data.continue === 'undefined'){
        displayCantFound(find('.box').value)
      } else {
        console.log(data);
      }
    })
    .catch((e) => alert('an error occurred', e))
}

const displayCantFound = theInputValue => {
  find('.result').insertAdjacentHTML('beforeend',
  `<div>
      <h3> sorry can't found what you are looking ${theInputValue} </h3>
  </div>`)
}

// const displayError = () => {
//
// }

1 Ответ

0 голосов
/ 02 февраля 2019

Не вставляйте новый HTML каждый раз.Просто полностью замени его.

const displayCantFound = theInputValue => {
  find('.result').innerHTML  = `<div>
      <h3> sorry can't found what you are looking ${theInputValue} </h3>
  </div>`
}

Если вы хотите удалить ошибку при обнаружении данных, вы можете заменить следующую часть кода на мою 

if(typeof data.continue === 'undefined'){
   displayCantFound(find('.box').value)
} else {
   console.log(data);
   //this line is added
   document.querySelector('.result').innerHTML = '';
}
...