Im using the js function shown below to make a part of page disappear when user clicks on the button.
but when i click on the button, the part does disappear, but then page reloads.
why is it like this?
<button id="myDIV" onclick="fncShowHide()">Try it</button>
<script>
window.fncShowHide = function() {
document.getElementById("idein").className = "display-none";
}
</script>
See What's the standard behavior when < button > tag click?.
Return false from the onclick handler to prevent any default browser action.
<button id="myDIV" onclick="fncShowHide(); return false;">Try it</button>
?
window.fncShowHide = function() {
document.getElementById("idein").className = "display-none";
}
window.other_ = function() {
document.getElementById("idein").style.display = "none";
}
.display-none{
display:none;
}
<button id="myDIV" onclick="fncShowHide(); return false;">Try it</button>
<div id="idein">BYEEEEEEEEEEEEEEEEEEEEEEEEEEE!</div>
<script>
</script>
Related
i have a html view with form tag, i need to add dynamically text to the form using a button click, the full code is below work well when i remove the <form> tag, but when i keep the form tag is doenst work, seems like the page is refreshing and text is disappearing
<html>
<body>
<form >
<button onclick="create()">Create Heading</button>
</form>
<script>
function create() {
var h1 = document.createElement('h1');
h1.textContent = "New Heading!!!";
h1.setAttribute('class', 'note');
document.body.appendChild(h1);
}
</script>
Use event.preventDefault() to prevent the default action:
function create(event) {
event.preventDefault(); //add this
var h1 = document.createElement('h1');
h1.textContent = "New Heading!!!";
h1.setAttribute('class', 'note');
document.body.appendChild(h1);
}
<form>
<button onclick="create(event)">Create Heading</button>
</form>
You need to prevent default submit behavior with preventDefault()
<html>
<body>
<form >
<button onclick="create(e)">Create Heading</button>
</form>
<script>
function create(e) {
e.preventDefault();
var h1 = document.createElement('h1');
h1.textContent = "New Heading!!!";
h1.setAttribute('class', 'note');
document.body.appendChild(h1);
}
</script>
I want to add a class to the parent if the child has a specific class.
The problem: It's in an iFrame and I'm not very good with jQuery. It don't really has to be jQuery, any other way would be also great. Just notice: The iFrame is on my domain, but I can't access it, because it's generated by a plugin.
If you have any ideas how to fix it, I would appreciate it
My HTML looks somewhat like this in devtools:
<iframe src="#" id="iFrameResizer0">
<div class="book-day">
<button class="disabled">Button Text</button>
</div>
<div class="book-day">
<button class="active">Button Text</button>
</div>
</iframe>
and my jQuery:
$(document).ready(function () {
$("#iFrameResizer0").contents().find(".book-day button")
if ($('.book-day button').hasClass('disabled')) {
$(".book-day button").parent().addClass('disabled');
}
});
if everything works correct I want my html looks like this afterwards:
<iframe src="#" id="iFrameResizer0">
<div class="book-day disabled">
<button class="disabled">Button Text</button>
</div>
<div class="book-day">
<button class="active">Button Text</button>
</div>
</iframe>
Devtools:
NOTE: this code has to be executed AFTER the iFrame has loaded and rendered. If you execute this in the head of the parent page without wrapping it in $(function() { ... }), it will not work
You have more than one book-day, you will need to loop:
$("#iFrameResizer0").contents().find(".book-day button").each(function() {
$(this).parent().toggleClass('disabled',$(this).is('.disabled'));
})
or perhaps
$("#iFrameResizer0").contents().find(".book-day button.disabled").each(function() {
$(this).parent().addClass('disabled');
})
PS: To remove them you do not need to give them a class:
$("#iFrameResizer0").contents().find(".book-day button.disabled").each(function() {
$(this).parent().remove;
})
If you still have issue with the timing, try this script right after the iframe tags - right after the </iframe>
<script>
$("#iFrameResizer0").on("load",function() {
$("#iFrameResizer0").contents().find(".book-day button.disabled").each(function() {
$(this).parent().remove(); // or .addClass('disabled');
})
})
</script>
UPDATE: Alternatively drop the iFrame completely:
Replace the iframe tags with <div id="iFrameResizer0"></div>
and add
<script>
$("#iFrameResizer0").load("/wp-json/ssa/v1/embed-inner?integration.../type/Reservierung",function() {
$("#iFrameResizer0").find(".book-day button.disabled").each(function() {
$(this).parent().remove(); // or .addClass('disabled');
});
});
</script>
Example pretending your iframe.content() works as expected (same origin)
$(function() { // on page load. This might STILL be too early
$("#iFrameResizer0").contents().find(".book-day button.disabled").each(function() {
$(this).parent().addClass('disabled');
})
});
.disabled {
background-color: grey
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="iFrameResizer0">
<div class="book-day disabled">
<button class="disabled">Button Text</button>
</div>
<div class="book-day">
<button class="active">Button Text</button>
</div>
<div class="book-day disabled">
<button class="disabled">Button Text</button>
</div>
</div>
You don't have to check for every button if it has disabled class or not. You can directly select those button having disabled class.
In Javascript, you have to iterate for all the buttons having disabled class, and add disabled class to it's parent. However, in jQuery, as you can see, you can achieve that, without using any loop.
For JavaScript :
$(document).ready(function() {
var all = document.querySelectorAll('#iFrameResizer0 .book-day button.disabled');
all.forEach((item) => {
item.parentElement.classList.add('disabled');
})
});
For jQuery :
$("#iFrameResizer0 .book-day button.disabled").parent().addClass('disabled');
Since the iframe is observing same-origin policy, This is possible.
First you need to select your iframe element using the following JS
var iframe = document.getElementById('iFrameResizer0');
Now you need to get the content in your iframe
var iframeContent = iframe.contentDocument;
Then select elements inside your Iframe which you wish to modify
var iframeElement = iframeContent.getElementsByClassName("book-day");
var i = 0, ilen = iframeElement.length - 1;
for (var i = 0; i < ilen; i++) {
var button = iframeElement.getElementsByTagName("button");
if(button.className == 'disabled')
{
iframeElement[i].className == 'disabled';
}
}
Then hide your element using CSS display:none property
.disabled {display:none;}
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>
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>
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>
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>
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>
I want to show an image when I click on the button. But right now the button hides the image when I click on it. Is there a way to reverse this? This is the code I have.
var flag = 1;
function coursework() {
if (flag == 1) {
document.getElementsById("coursework").style.display = "none";
flag = 0;
} else {
document.getElementById("coursework").style.display = "block";
flag = 1;
}
}
<button onclick="coursework()">Show Coursework</button>
<div id="coursework">
<img src="Wellcome.png" width="300">
</div>
Thank you :)
You can set the image to display: none; initially and then change your if-else condition accordingly so that the image is displayed on first click and hide on second click and so on. Also, it should be getElementById and not getElementsById.
document.getElementById("coursework").style.display="none";
var flag =1;
function coursework() {
if(flag==1)
{
document.getElementById("coursework").style.display="block";
flag=0;
}
else{
document.getElementById("coursework").style.display="none";
flag=1;
}
}
<button onclick="coursework()">Show Coursework</button>
<div id="coursework">
<img src="https://images.pexels.com/photos/87840/daisy-pollen-flower-nature-87840.jpeg?auto=compress&cs=tinysrgb&h=350" width="300">
</div>
I am assume scenario that initially you hide image and when click on button it will show it, may be it will different from what you want and try to give this answer. Refer following code
<html>
<body>
<button onclick="show()">Show Coursework</button>
<div id="coursework" style="display:none">
<img src="welcome.png" width="300">
</div>
<script>
function show(){
document.getElementById("coursework").style.display="block";
}
</script>
</body>
</html>
hope this will help full.
I don't know why this function is not working.
HTML:
<button id="welcomehomebtnlogin" type="button" onclick="loginformfunction()">Login</button>
JavaScript:
function loginformfunction()
{
document.getElementById("welcomehomebtndiv").style.display = "none";
document.getElementById("loginform").style.display = "block";
}
What I want to do is: if the user clicks on the "Login" button, one form will disappear with display = "none". The button is part of this form, and it will also disappear. Then a second form will be shown.
It's not working; any ideas why?
Your code look fine, check the basic example bellow.
Hope this helps.
function loginformfunction()
{
document.getElementById("welcomehomebtndiv").style.display = "none";
document.getElementById("loginform").style.display = "block";
}
document.getElementById("welcomehomebtnlogin").addEventListener('click', loginformfunction, false);
#loginform{
display: none;
}
<div id='welcomehomebtndiv'>
Welcome HOME div
<button id="welcomehomebtnlogin" type="button">Login</button>
</div>
<div id='loginform'>
Login div
</div>