在 JS 中单击第一个按钮后添加第二个按钮
[英]Add a second button after first is clicked in JS
问题描述
I need help with adding a second button "Proceed" to appear only after "I Agree" button is clicked by the user.
我需要帮助添加第二个按钮“继续”，仅在用户单击“我同意”按钮后才会出现。 The "Proceed" button should take the user to a specific URL. “继续”按钮应将用户带到特定的 URL。 https://www.google.com for example.例如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>
4 个解决方案
解决方案1
1 2020-07-28 08:08:05
Try something like this:尝试这样的事情：
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>
解决方案2
1 2020-07-28 08:21:51
You can make a new button using the document.createElement method, then give it some properties and append it to a parent element in the DOM.您可以使用document.createElement方法创建一个新按钮，然后给它一些属性并将 append 给它到 DOM 中的父元素。
You can navigate to a new page using the location property of the (default) window object.您可以使用（默认）window object 的location属性导航到新页面。 (Note that the line that handles browser navigation is commented out below because Stack Overflow snippets are sandboxed so the code would fail in this environment.) （请注意，处理浏览器导航的行在下面被注释掉，因为 Stack Overflow 片段是沙盒化的，因此代码在这种环境中会失败。）
This demo uses a " buttonContainer " div that is responsible for handling clicks on its child buttons, calling the appropriate function in each case.此演示使用“ 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>
解决方案3
0 2020-07-28 08:07:41
In this code, there is a hidden button when page is loaded.在此代码中，加载页面时有一个隐藏按钮。 After you click the "Agree" button, "Proceed" button will be appeared.单击“同意”按钮后，将出现“继续”按钮。
<!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>
解决方案4
0 2020-07-28 08:08:20
try like this试试这样
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.