Question

我正在练习我的API技能并决定制作加密货币计算器（足够简单）。

我一直坚持如何在HTML文档中将我想要的值输出到特定的DIV“id”。据我所知，一切似乎都应该有效，但当我尝试将所需的值输出到我的innerHTML时，它什么也没输出。

我正在尝试将此值{“USD”：1.94}输出到我的HTML上。但是，我不够熟练，无法从其各自的存储中正确调用此值。我希望有人能帮我解决这个问题。谢谢。

这是我的HTML：

<div class="wrapper">
    <div class="page-header" style="background-image: url('../assets/img/login-image.jpg');">
        <div class="filter"></div>
        <div class="moving-clouds" style="background-image: url('http://demos.creative-tim.com/paper-kit-2/assets/img/clouds.png');">
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-4 ml-auto mr-auto">
                    <div class="card card-register">
                        <h3 class="title">Welcome</h3>
                        <div class="social-line text-center">
                            <a href="#pablo" class="btn btn-neutral btn-facebook btn-just-icon">
                                <i class="fa fa-facebook-square"></i>
                            </a>
                            <a href="#pablo" class="btn btn-neutral btn-google btn-just-icon">
                                <i class="fa fa-google-plus"></i>
                            </a>
                            <a href="#pablo" class="btn btn-neutral btn-twitter btn-just-icon">
                                <i class="fa fa-twitter"></i>
                            </a>
                        </div>
                        <form class="register-form">
                            <label>Email</label>
                            <input type="text" class="form-control" placeholder="Email">

                            <label>Password</label>
                            <input type="password" class="form-control" placeholder="Password">
                            <button class="btn btn-danger btn-block btn-round">Register</button>
                        </form>
                        <div class="forgot">
                            <a href="#" class="btn btn-link btn-danger">Forgot password?</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer register-footer text-center">
                <h6>© <script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script>document.write(new Date().getFullYear())</script>2018, made with <i class="fa fa-heart heart"></i> by Creative Tim</h6>
            </div>
        </div>
    </div>
</div>

这是Javascript：

<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Crypto Calc</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
    <!-- <script type="text/javascript" src="https://min-api.cryptocompare.com/"></script> -->
</head>
<body>
    <header>
        Header
    </header>
    <div id="pbf-main-container">

    </div>
    <footer>
        Footer
    </footer>
             <script src="pbf.js"></script>
</body>
</html>

Answer 1

移动最后五行

// Putting the outcome of the HTTP request into a Variable
var XRPUSD = request.responseText;
// This it to integrate it with the index.html
// console.log(XRPUSD);
document.getElementById("pbf-main-container").innerHTML = XRPUSD;

这一行之后

document.body.className = 'ok';
// Putting the outcome of the HTTP request into a Variable
var XRPUSD = request.responseText;
// This it to integrate it with the index.html
// console.log(XRPUSD);
document.getElementById("pbf-main-container").innerHTML = XRPUSD;

Answer 2

// Get the HTTP Header Request for CryptoCompare API
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
    if (request.readyState === 4) {
        if (request.status === 200) {
            document.body.className = 'ok';
            console.log(request.responseText); // This is the outcome of the curreny value
      // Putting the outcome of the HTTP request into a Variable
      var XRPUSD = request.responseText;
            // beautify JSON object
      document.getElementById("pbf-main-container").innerHTML = JSON.stringify(XRPUSD,null,2);
        } else if (!isValid(this.response) && this.status == 0) {
            document.body.className = 'error offline';
            console.log("The computer appears to be offline.");                
        } else {
            document.body.className = 'error';
        }
    }
};
request.open("GET", 'https://min-api.cryptocompare.com/data/price?fsym=XRP&tsyms=USD' , true);
request.send(null);

Http请求是异步的，所以你

如何从本机Function API将String输出到HTML文档页面

2 个答案: