Question

我的一个API调用提供了一个youtube链接，我希望该链接可以点击并在另一个标签上打开，但是没有任何作用

这是模式代码HTML：

//该ID会生成一个可以单击的youtube链接，但是如果我将该ID添加到href中，那么它将无法正常工作。

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

我的js代码：

///这是我的XML调用，如果存在用于YouTube链接的.innerXML以外的其他.link函数，则可能是问题所在，但我无法在线找到任何内容。函数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
    }
  }
}

Answer 1

提供的代码中不存在ID为strYoutube的HTML元素：

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

要实现您想做的事情，可以按以下方式更改代码：

检查是否设置了带有预定义的img和width的{{1}} HTMl元素。

还要检查working jsfiddle here：

height

// 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();

如何通过XML调用使id =给出其调用的链接？

1 个答案: