如何从XML调用中创建一个id =给出一个它调用的链接？

Question

我的一个API调用提供了一个youtube链接，我希望该链接可以在另一个选项卡上单击并打开，但没有任何工作正常

这是模式代码HTML：

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

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

我的js代码：

//这是我的XML调用，如果除了.intXML之外的另一个.link函数用于youtube链接，也许这可能是问题，但我无法在网上找到任何东西。 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
    }
  }
}

Answer 1

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

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

为了实现您要执行的操作，您可以按如下方式更改代码：

检查我是否使用预定义的img和width设置了height HTMl元素。

检查working jsfiddle here：

// 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>