时间戳

首页 > 解决方案 > onclick后运行获取数据的函数

javascript - onclick后运行获取数据的函数

问题描述

我有检索JSON数据的功能

json如果单击数据显示，我想添加按钮

部分代码

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <input type="submit" value = "Submit" id = "Submit" onclick="appendData(data)" >
    <div id="myData"></div>
    <script>
        fetch('quizQuestions.json')
            .then(function (response) {
                return response.json();
            })  
            .then(function (data) {
                appendData(data);
            })

        function appendData(data) {
  var mainContainer = document.getElementById("myData");
  var div = document.createElement("div");

}


  }
    </script>
</body>
</html>

我需要appendData在用户单击提交时运行。我试过onclick但功能正在运行而没有点击

标签： javascriptjson

解决方案

你的意思是在点击时获取并附加

注意，我将按钮更改为按钮而不是提交

window.addEventListener("load", function() {
  document.getElementById("Submit").addEventListener("click", function() {
    fetch('quizQuestions.json')
      .then(function(response) {
        return response.json();
      })
      .then(function(data) {
        appendData(data);
      })
  })
});

function appendData(data) {
  var mainContainer = document.getElementById("myData");
  var div = document.createElement("div");
  div.innerHTML = data;
  mainContainer.appendChild(div);
}

<input type="button" value="Submit" id="Submit">
<div id="myData"></div>

或获取并附加 onload 但在点击时显示？

window.addEventListener("load", function() {
  fetch('quizQuestions.json')
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      appendData(data);
    });
  document.getElementById("Submit").addEventListener("click", function() {
     document.querySelector("myData > div").classList.toggle("hide")
  })
});

function appendData(data) {
  var mainContainer = document.getElementById("myData");
  var div = document.createElement("div");
  div.innerHTML = data;
  div.classList.add("hide"); // CSS: .hide { display: none; }
  mainContainer.appendChild(div);
}

<input type="button" value="Submit" id="Submit">
<div id="myData"></div>

推荐阅读