Блог

Я пытаюсь добавить свои переменные ‘showName’ и ‘showDescription’ к объекту div ‘results’. Я пытался добавить их, используя ‘innerHTML’, но я просто получаю показанное описание. Я попытался создать дополнительные разделы для размещения ВНУТРИ div «результаты», но это тоже не сработало.

Я хочу, чтобы ‘showName’ отображалось над ‘showDescription в div.

Я бросаю себе вызов не использовать jQuery, так что это нежизнеспособный вариант.

код:

 document.querySelector('.search').addEventListener('keypress', function(e){//On button click of enter, get the value of the search bar and concatanate it to the end of the url
  if(e.key==='Enter'){
    var query = document.getElementById('main').value;
    var url = fetch("http://api.tvmaze.com/search/shows?q=" query) //use fetch to get the data from the url, THEN convert it to json THEN console.log the data.
    .then(response => response.json())
    .then(data => {
      console.log(data)

      var domObject = document.createElement('div')
      domObject.id="myDiv";
      domObject.style.width="800px";
      domObject.style.height="5000px";
      domObject.style.display="flex";
      domObject.style.flexDirection="column";
      domObject.style.margin="auto";
      domObject.style.borderRadius="30px";
      domObject.style.background="";
      document.body.appendChild(domObject);

      for (var i = 0; i < data.length; i  ) { //for all the items returned, loop through each one and show the name of the show and the dsescription of the show.
        var showName = data[i].show.name;
        //console.log(showName);
        var showDescription = data[i].show.summary
//console.log(showDescription);
        var results = document.createElement('div')
        results.id="myResults";
        results.style.width="600px"
        results.style.height="400px";
        results.style.background="white";
        results.style.margin="auto";
        results.style.borderRadius="30px";
        results.style.fontFamily="Poppins"
        results.style.display="flex";
        results.style.flexDirection="column";
        results.innerHTML=showName;
        results.innerHTML=showDescription;
        document.getElementById("myDiv").appendChild(results);
      }
    })
  }
});
document.querySelector('.search').addEventListener('keydown', function(o){
  if(o.key==='Backspace'){
    location.reload();
  }
});
  

результат поиска в ‘car’

 results.innerHTML = showName;
results.innerHTML = showDescription;
  

При этом вы перезаписываете showName с showDescription помощью.
Что вам нужно сделать, так это объединить с = .

Кроме того, будет намного проще заменить это:

 domObject.style.width = "800px";
domObject.style.height = "5000px";
domObject.style.display = "flex";
domObject.style.flexDirection = "column";
domObject.style.margin = "auto";
domObject.style.borderRadius = "30px";
domObject.style.background = "";
  

с помощью domObject.classList.add('some-class');

и CSS будет:

 .some-class {
  width: 800px;
  height: 500px;
  // etc...
}
  

Переместил ваш код в рабочий пример.

Примечание: из-за стилей авторов фрагмент можно запускать только в полноэкранном режиме. =)

 const dosearch = () => {
  var query = document.getElementById('main').value;
  var url = fetch("https://api.tvmaze.com/search/shows?q="   query)
    .then(response => response.json())
    .then(data => {
      const myDiv = document.getElementById("myDiv");
      myDiv.innerHTML = ''; // <---- this is for testing
      
      for (var i = 0; i < data.length; i  ) {
        var showName = data[i].show.name;
        var showDescription = data[i].show.summary

        var results = document.createElement('div');
        results.className = 'myResults';

        var header = document.createElement('h2');
        header.innerHTML = showName;
        results.appendChild(header);

        var desc = document.createElement('div');
        desc.innerHTML = showDescription;
        results.appendChild(desc);

        myDiv.appendChild(results);
      }
    });
}

document.querySelector('.search').addEventListener('keypress', function(e) {
  if (e.key === 'Enter') {
    dosearch();
  }
});  

 #myDiv {
  width: 800px;
  height: 5000px;
  display: flex;
  flex-direction: column;
  margin: auto;
  border-radius: 30px;
  background: black;
}

.myResults {
  width: 600px;
  height: 400px;
  background: white;
  margin: auto;
  border-radius: 30px;
  font-family: Poppins;
  display: flex;
  flex-direction: column;
}

.myResults p, .myResults h2 {
  margin: 1em;
}  

 <input type="text" id="main" class="search" style="margin-bottom: 4px" value="Car" /><button onclick="dosearch()">Go</button>
<div id="myDiv"></div>