首页 > 解决方案 > innerHTML 未从 fetch 函数接收值

问题描述

我有一个简单的 api 提取,它返回一个我想插入输入的数字。我正在使用 document.getElementById(#id).innerHTML。我可以通过 console.log 查看该值,但它没有显示在输入中。

    <div>
      <input type="number" name="AtBats" id="atBats" value="" />
    </div>

    <script>
      const player_url =
        'http://lookup-service-prod.mlb.com/json/named.sport_hitting_tm.bam?league_list_id=%27mlb%27&game_type=%27R%27&season=%272017%27&player_id=%27592450%27';
      
async function getNums() {
        const response = await fetch(player_url);
        const data = await response.json();
        let output = data.sport_hitting_tm.queryResults.row.ab;
        console.log(output);
        document.getElementById('atBats').innerHTML = output;
        console.log(atBats)
      }

      getNums();

标签: javascripthtmlfetch-api

解决方案


您不能将 innerHTML 分配给输入元素,因为它没有它。Value 和 interHTML 不是一回事。你可以这样做来改变价值;

document.getElementById('atBats').value= output;


推荐阅读