在 JS 中单击第一个按钮后添加第二个按钮

Question

我需要帮助添加第二个按钮“继续”，仅在用户单击“我同意”按钮后才会出现。 “继续”按钮应将用户带到特定的 URL。 例如https://www.google.com 。

<!DOCTYPE html>
<html>
<body>
<p> Click following button to agree to the terms and conditions.</p>
<p id="demo" style="color:white">User Agreed to terms and conditions.</p>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "I Agree";
}
</script>

<button onclick="myFunction()">I Agree</button>

<script>
function myFunction() {
  var x = document.getElementById("demo");
  x.style.color = "green";
}
</script>

</body>
</html>

Answer 1

尝试这样的事情：

 function agree() { document.getElementById("proceed").style.display = "block"; }

 <.DOCTYPE html> <html> <body> <p> Click following button to agree to the terms and conditions:</p> <button onclick="agree()">I Agree</button> <a id="proceed" style="display; none:" href="https.//www.google.com">Proceed</a> </body> </html>

Answer 2

您可以使用document.createElement方法创建一个新按钮，然后给它一些属性并将 append 给它到 DOM 中的父元素。

您可以使用（默认）window object 的location属性导航到新页面。 （请注意，处理浏览器导航的行在下面被注释掉，因为 Stack Overflow 片段是沙盒化的，因此代码在这种环境中会失败。）

此演示使用“ buttonContainer ” div 负责处理对其子按钮的点击，在每种情况下调用适当的 function。

 const buttonsContainer = document.getElementById("buttons-container"); buttonsContainer.addEventListener("click", handleButtonClicks); function handleButtonClicks(event){ if(event.target.id == "agree-btn"){ addProceedBtn(event); } else if(event.target.id == "proceed-btn"){ proceed(event); } } function addProceedBtn(event){ const proceedBtn = document.createElement("button"); proceedBtn.id = "proceed-btn"; proceedBtn.textContent = "Proceed"; buttonsContainer.appendChild(proceedBtn); } function proceed(event){ console.log("We got one;"): // location = "https.//my-other-page;com"; // Redirects browser }

 <p> Click following button to agree to the terms and conditions.</p> <div id="buttons-container"> <button id="agree-btn">I Agree</button> </div>

Answer 3

在此代码中，加载页面时有一个隐藏按钮。 单击“同意”按钮后，将出现“继续”按钮。

<!DOCTYPE html>
<html>
<body>
    <p> Click following button to agree to the terms and conditions.</p>
    <p id="demo" style="color:white">User Agreed to terms and conditions.</p>
    <button onclick="myFunction()">I Agree</button>
    <button id="proceed-button" onclick="window.location.href = 'http://www.google.com'" style="display:none">Proceed</button>
<script>
function myFunction() {
  
  var x = document.getElementById("demo");
  x.style.color = "green";
  document.getElementById("proceed-button").style.display = 'inline-block';
  
}
</script>
</body>
</html>

Answer 4

试试这样

<!DOCTYPE html>
<html>
<body>
<input type="checkbox" id="check"> 
<p> Click following button to agree to the terms and conditions.</p>
<p id="demo" style="color:white">User Agreed to terms and conditions.</p>
<button id="btn" onclick="myFunction()">Proceed</button>
<script>
  document.querySelector('#btn').setAttribute("disabled", "disabled");
  document.querySelector('#check').addEventListener('click', function(event) {
    console.log(event.srcElement.checked);
    if(event.srcElement.checked) {
      document.querySelector('#btn').removeAttribute("disabled");
    } else {
       document.querySelector('#btn').setAttribute("disabled", "disabled");
    }
  })
  function myFunction() {
    var x = document.getElementById("demo");
    x.style.color = "green";
  }
</script>
</body>
</html>

在 JS 中单击第一个按钮后添加第二个按钮

问题描述

4 个解决方案

解决方案1
1 2020-07-28 08:08:05

解决方案2
1 2020-07-28 08:21:51

解决方案3
0 2020-07-28 08:07:41

解决方案4
0 2020-07-28 08:08:20

在 JS 中单击第一个按钮后添加第二个按钮

问题描述

4 个解决方案

解决方案1 1 2020-07-28 08:08:05

解决方案2 1 2020-07-28 08:21:51

解决方案3 0 2020-07-28 08:07:41

解决方案4 0 2020-07-28 08:08:20

解决方案1
1 2020-07-28 08:08:05

解决方案2
1 2020-07-28 08:21:51

解决方案3
0 2020-07-28 08:07:41

解决方案4
0 2020-07-28 08:08:20