Add a second button after first is clicked in JS
Question
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. https://www.google.com for example.
<!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 answers
solution1
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>
solution2
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.
You can navigate to a new page using the location property of the (default) window object. (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.)
This demo uses a " buttonContainer " div that is responsible for handling clicks on its child buttons, calling the appropriate function in each case.
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>
solution3
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>
solution4
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.