我需要在WordPress网站前端的按钮单击上显示硬币价格(来自cryptocompare API)。我的编码技能有限,所以如果您可以直接向我解释如何做,那就太好了!
这就是我所拥有的; HTML
<button id="api-button">Show Data</button>
<div id="api-display-container"></div>
main.js
var apiButton = document.getElementById("api-button");
var apiDisplayContainer = document.getElementById("api-display-container");
if (apiButton) {
apiButton.addEventListener("click", function() {
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'https://min-api.cryptocompare.com/data/price?fsym=ETH&tsyms=BTC,USD,RUB');
ourRequest.onload = function() {
if (ourRequest.status >= 200 && ourRequest.status < 400) {
var data = JSON.parse(ourRequest.responseText);
createHTML(data);
} else {
console.log("We connected to the server, but it returned an error.");
}
};
ourRequest.onerror = function() {
console.log("Connection error");
};
ourRequest.send();
});
}
functions.php
function cryptocompareAPI(){
wp_enqueue_script('main.js', get_template_directory_uri() . '/assets/js/main.js', NULL, 1.0, true);
}
add_action('wp_enqueue_scripts', 'cryptocompareAPI');
当我替换createHTML(data)时;使用console.log(data),正确的数据将显示在控制台中。
如何在前端显示它?请解释或提供示例。谢谢!