Question

我需要帮助，尝试将<scripts>中的内容放到我的HTML页面上。

我正在使用Yahoo Weather API，这是我的信息：

<script>
    var callbackFunction = function (data) {
        var location = data.query.results.channel.location;
        var condition = data.query.results.channel.item.condition;
        var wind = data.query.results.channel.wind;
        //I could just alert all of these to get pop ups but I am not looking for that
    }
</script>
<script src="https://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20weather.forecast%20WHERE%20woeid%3D%22%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=callbackFunction"></script>

现在，如何将3个变量location，condition，wind放入<div>，以便它们可以显示为HTML？

Answer 1

这是一个简单的例子：

<div id="results"></div>
<script>
    var callbackFunction = function (data) {
        
        console.log('Data from yahoo:', data); // response from yahoo
        
        var location = 'Hello'; //data.query.results.channel.location;
        var condition = 'World'; //data.query.results.channel.item.condition;
        var wind = '!'; //data.query.results.channel.wind;
        //I could just alert all of these to get pop ups but I am not looking for that
      
        // INTERACTING WITH THE D.O.M.
        document.getElementById('results').innerHTML = location + '</br>' + condition + '</br>' + wind;

    }
</script>
<script src="https://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20weather.forecast%20WHERE%20woeid%3D%22%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=callbackFunction"></script>

基本上我们在这里做的是抓取页面document，通过其标识.getElementById('results')查找元素，并使用.innerHTML属性设置其包含的html，并使用{{ 1}}将每个结果放在一个新行上。

将JS添加到HTML页面

1 个答案: