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

尝试这样的事情：

rawSocket = socket.socket(socket.AF_PACKET, socket.SOCK_RAW, socket.htons(3))
rawSocket.bind(('eth1',0))

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

Answer 2

您可以使用document.createElement方法创建一个新按钮，然后为其提供一些属性，并将其附加到DOM中的父元素。

您可以使用（默认）窗口对象的location属性导航到新页面。（请注意，处理浏览器导航的这一行在下面被注释掉了，因为Stack Overflow片段已被沙箱化，因此在这种环境下代码将失败。）

此演示使用一个“ buttonContainer” div，该div负责处理其子按钮上的单击，并在每种情况下调用相应的函数。

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 个答案: