如何使 XML 调用中的 id= 提供指向其调用内容的链接？

Posted 2023-03-05

【中文标题】如何使 XML 调用中的 id= 提供指向其调用内容的链接？

【英文标题】：How to make an id= from an XML call give a link to what its calling?

【发布时间】：2019-06-28 14:10:45

【问题描述】：

我的一个 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
    
  

【问题讨论】：

id 会生成一个可以点击的 youtube 链接，但如果我将 id 添加到 href 中，它将无法工作。您应该 edit 显示输出你说“不会工作”以及它如何不工作的确切描述。

【参考方案1】：

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

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

为了实现你想要做的事情，你可以改变你的代码如下：

检查我是否使用预定义的width 和height 设置了img 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"  title="" style="width: 150px; height: 150px;" />
  </p>
</a>