Как сделать так, чтобы id = из вызова XML давал ссылку на то, что он вызывает? - PullRequest
Новая
       6

Как сделать так, чтобы id = из вызова XML давал ссылку на то, что он вызывает?

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

Один из моих вызовов API дает ссылку на YouTube, и я хочу, чтобы ссылка была кликабельной и открывалась на другой вкладке, но ничего не работает

это код режима HTML:

//идентификатор создает ссылку на YouTube, по которой можно щелкнуть, но если я добавлю идентификатор к href, то он не будет работать. 

<a href="" target="_blank">
<p id="strYoutube2"></p>
</a>

мой код js:

// этомой вызов XML, если для ссылки на YouTube есть другая функция .link, отличная от .innerXML, возможно, это может быть проблемой, но я ничего не могу найти в Интернете.function getPosts () {

  let xhr = new XMLHttpRequest();

  xhr.open('GET', 'https://www.themealdb.com/api/json/v1/1/random.php', true);
  console.log(xhr.readyState);

  xhr.send();
  xhr.onreadystatechange = () => {
    if (xhr.readyState == 4 && xhr.status == 200) {
      let response = JSON.parse(xhr.responseText);
      console.log('response below:')
      console.log(response);
      console.log(response.meals[0].strMealThumb);
      document.getElementById('strMeal').innerText = response.meals[0].strMeal
      document.getElementById('strCategory').innerText = response.meals[0].strCategory
      document.getElementById('strArea').innerText = response.meals[0].strArea
      document.getElementById('strTags').innerText = response.meals[0].strTags
      document.getElementById('strYoutube').innerHTML = response.meals[0].strYoutube
      document.getElementById('strMealThumb').src = response.meals[0].strMealThumb
    }
  }
}

1 Ответ

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

HTML-элемент с идентификатором strYoutube НЕ существует в предоставленном вами коде: 

document.getElementById('strYoutube').innerHTML = response.meals[0].strYoutube

Для достижения цели вы можете изменить свой код следующим образом:

Убедитесь, что я установил img элемент HTMl с предопределенными width и height.

Проверьте здесь рабочий jsfiddle тоже: 

// This is your function for get the posts of the given API URL.
function getPosts() {
  let xhr = new XMLHttpRequest();

  xhr.open('GET', 'https://www.themealdb.com/api/json/v1/1/random.php', true);
  console.log(xhr.readyState);

  xhr.send();
  xhr.onreadystatechange = () => {
    if (xhr.readyState == 4 && xhr.status == 200) {
      let response = JSON.parse(xhr.responseText);
      console.log('response below:')
      console.log(response);
      console.log(response.meals[0].strMealThumb);

      // Comented due these HTML elements aren't here.
      //document.getElementById('strMeal').innerText = response.meals[0].strMeal
      //document.getElementById('strCategory').innerText = response.meals[0].strCategory
      //document.getElementById('strArea').innerText = response.meals[0].strArea
      //document.getElementById('strTags').innerText = response.meals[0].strTags
      //document.getElementById('strYoutube').innerHTML = response.meals[0].strYoutube
      //document.getElementById('strMealThumb').src = response.meals[0].strMealThumb

      // Here I set the values to your HTML elements:
      // "strYoutube" is the HTML anchor element "<a href>".
      document.getElementById('strYoutube').href = response.meals[0].strYoutube;

      // "myImg" is the HTML image element "<img src>".
      document.getElementById('myImg').src = "https://www.themealdb.com/images/media/meals/ysqupp1511640538.jpg";
      document.getElementById('myImg').alt = response.meals[0].strMeal;
      document.getElementById('myImg').title = response.meals[0].strMeal;
    }
  }
}

// Call your function and set the values ion the HTML elements:
getPosts();
<a href="" target="_blank" id="strYoutube">
  <p id="strYoutube2">
    <img src="#" id="myImg" alt="image" title="" style="width: 150px; height: 150px;" />
  </p>
</a>
...