在 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