I'm trying to have a couple of buttons to show and hide some pictures, I have gotten it to somewhat work, but when I start the webpage the pictures are already shown, when I try make them invisible at start. I have tried swapping the "block" and "none" sentences in the function, but it just made the button less responsive.
javascript part:
function bassnectar() {
var x = document.getElementById("myDIV3");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
html part:
<button onclick="bassnectar()">Bassnectar</button>
<div id="myDIV3">
<img src="/images/bassnectar.jpg">
</div>
What you’re missing is that you’re assuming that block elements have a default display value of block. Which would be intuitive.
Such is not the case though.
The initial value of display is the browser’s default. If you query the value of the display property on a new HTML element, you’ll get an empty string.
It doesn’t return block until you explicitly set its display to block.
Edit:
It's important to note that setting a value in CSS doesn't change the behavior. If you set a div to be display block in CSS, it will still return an empty string if you query it.
Here's a working example:
var block = document.createElement("div");
var inline = document.createElement("span");
console.log("Initial display values:")
console.log(`block.style.display: ${block.style.display}`);
console.log(`inline.style.display: ${inline.style.display}`);
block.style.display = "block";
inline.style.display = "inline";
console.log("\nAfter setting them explicitly:")
console.log(`block.style.display: ${block.style.display}`);
console.log(`inline.style.display: ${inline.style.display}`);
div {
display: block !important;
}
Related
I have a submit button that uses Gravity Forms to conditionally show or hide the button.
When the button is shown the code looks like: <button class="button gform_button" id="gform_submit_button_1" style="">
When the button is not shown the code looks like: <button class="button gform_button" id="gform_submit_button_1" style="display: none;">
So, what I wanted to do was display a div when the button is not displayed or has the inline style display: none.
I thought I could do something like this:
function myFunction() {
var x = document.getElementById('gform_submit_button_1');
if (x.style.display = 'none') {
document.getElementById("div1").style.display = "block";
} else {
document.getElementById("div1").style.display = "none";
}
}
<div id="div1">This is a hidden div that we can show with JavaScript</div>
This shows div1 when the page loads, but when style="" the div does not hide. When the condition is true and style="" the page does not refresh, which is probably the issue. Is there a way to tweak things so that when style="" div1 is not shown?
Thanks,
Josh
if (x.style.display = 'none')
This should be:
if (x.style.display == 'none')
otherwise, the if statement will return true in all cases, and the x.style.display property will be always 'none'.
As in the comment section, = is used for assignment, == for value comparison whereas === is used for type and value comparison.
And for this,
When the condition is true and style="" the page does not refresh,
which is probably the issue.
you should call the function somewhere so it can be executed after the page loading.
Alternatively, you could also simply add a Gravity Form HTML field with your alternative div inside. Then use conditional logic to show it when the submit button is hidden.
As the queue for editing of answer from #Dream Bold is full this is my answer regarding to this question based on the previous Answer.
Basically clarification
Following line of code:
if (x.style.display = 'none')
Should be changed to:
if (x.style.display == 'none')
Main difference is the operator used (==). In the first case by using "=" the if statement will always return true, and the x.style.display property will be always 'none'.
As in the comment section, = is used for assignment, == for value comparison whereas === is used for type and value comparison.
To learn more about expressions and operators: Check here
And regarding for following requirement
When the condition is true and style="" the page does not refresh,
which is probably the issue.
The problem in this is that the code is not executed.
You should first create function, then by adding event listeners or setting action which would call the previously created function so it can be executed after the page loading.
My suggestion is to use window.onload + another event listener/action attribute on element
Like this:
window.onload = function(){
var x = document.getElementById("gform_submit_button_1");
if(x.style.display == "none"){
alert("Display of x is none");
document.getElementById("div1").style.display = "block";
}
else{
alert("Display of x is not none");
document.getElementById("div1").style.display = "none";
x.style.display = "block";
}
}
I am trying to get this collapsible to function normally and show the first set of information when the page is loaded, make it disappear when the user presses "read more", and show new information.
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
function display() {
var x = document.getElementById("cover");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
You are attaching the onclick=display() to all of your list elements. GetElementById is going to return the first element with the given id, in this case it's always targeting your first cover (if you're triggering that elsewhere in your script). So since every 'read more' list element has the onclick function calling display(), it is always hitting your first element (because it's the first element with the respective id). What you could do instead pass in the event then use 'closest' and pass in the id there (if your intention is to hide the image as well). If not you can remove the display() on the onclick there.
The other elements are working as expected but you don't see it because your css on the enclosing container is hiding it (if you check your inspector you will notice the css being set as expected). You might want to add an overflow scroll to scroll within the container limits to see your expanded data, or use something like css flex with minimum height in order to expand the container to see your read more data
I have a DIV which has a display set to none, by using javascript I tried showing it by using the onclick of a button. But what happens is the exact opposite. My DIV is already shown and when I click the button it hides the DIV. What am i doing wrong here, please HELP!
This is my button and the div:
<button onclick="myFunction()">SHOW</button>
<div id="how_to_form">
<img src="../images/view.png">
</div>
This is the JS code:
function myFunction() {
var x = document.getElementById("how_to_form").style.display = 'none';
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
Your line there has a double assignment:
var x = document.getElementById("how_to_form").style.display = 'none';
It first assigns the display to none:
document.getElementById("how_to_form").style.display = 'none';
and then takes the result of that expression (which is the string you assigned), and assigns it to x:
var x = 'none';
Which isn't what you want. First declare the variable for the element, then assign its style.
Also, it sounds like you want the element to start out hidden - assign its initial style outside the function:
const form = document.getElementById("how_to_form");
form.style.display = 'none';
function myFunction() {
if (form.style.display === "none") {
form.style.display = "block";
} else {
form.style.display = "none";
}
}
Or, to be more concise, use the conditional operator:
function myFunction() {
form.style.display = form.style.display === "none"
? 'block'
: 'none';
}
Also consider attaching the handler properly using Javascript, rather than using inline HTML attributes, which are generally considered to be pretty poor practice and can be hard to manage:
document.querySelector('button').addEventListener('click', myFunction);
have you checked if you have already set a default style to your div?
you either have to set your div's default style to display:none by inline
<div id="how_to_form" style="display:none">
or by css
<style>
#how_to_form{ display:none }
</style>
Issue is your variable assignment
Chaining the assignment operator is possible in order to assign a single value to multiple variables.
Please refer this link for variable assignment options
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators
var x = y= 10
Then both x and y values are 10
Similarly in your code var x is none
To achieve expected result , use below option
1. set CSS for html_to_form to display:none
2.In your code change variable x assignment to
var x = document.getElementById("html_to_form")
I have two elements, the first one is the default to print on screen
<input id=post-category value="first">
and the other is this, which will only show if some onclick was made and of course the first element must show off
<select id=cat-sel ><option>second</option></select>
UPDATED
I tried this code
el = document.getElementById("post-category");
el.style.visibility = "hidden";
el2 = document.getElementById("cat-sel");
el2.style.visibility = "visible";
but the problem here is, the 2nd element is indented. because it escapes the space for the 1st element. I don't like that, I wanted them to be on the same position
Change to
el = document.getElementById("post-category");
el.style.display = "none";
el2 = document.getElementById("cat-sel");
el2.style.display = "block";
since visible/hidden does not remove the space the element takes up on the page
You need to set display:none on the field you need to hide initially
Assuming a checkbox have
window.onload=function() {
document.getElementById("categoryCheckbox").onclick=function() {
var chk = this.checked;
document.getElementById("post-category").style.display = chk?"none":"block";
document.getElementById("cat-sel").style.display = chk?"block":"none";
}
}
PS: A little more code is needed for the show/hide to survive a reload by the way...
Define CSS for your ID's and fix the position.
I have the following JavaScript function to display/hide a table row based on a listbox selection.
function clock_Type(id) {
var clockSource = document.getElementById("clockSource");
var clockType = document.getElementById("clockType");
if(id == "1") {
if(navigator.appName == "Microsoft Internet Explorer") {
clockType.style.display = "inline";
clockSource.style.display = "inline";
} else {
clockType.style.display = "table-row";
clockSource.style.display = "table-row";
}
} else {
clockType.style.display = "none";
clockSource.style.display = "none";
}
}
Following is the listbox.
<select id="clck" name="clock" class="selectStyle" style="width: 155px;" onchange="clock_Type(this.value)">
<option value="0">Disabled</option>
<option value="1">Enabled</option>
</select>
This is working fine on the listbox onchange event. i.e. the table row is getting hidden and displayed. But when I try to call the JS function clock_Type() from another function, as shown below, the table row is not getting displayed.
function foo() {
clock_Type(1);
}
When I traced the code the execution reaches the following section for FireFox
clockType.style.display = "table-row";
clockSource.style.display = "table-row";
But the table row is not getting displayed. Any idea what could be the issue here. Thanks in advance!
Set the display to an empty string instead of specifying "table-row" or "inline". This will give the elements a default display, so unless they are specified display:none; in a stylesheet the user agent will negotiate the proper display.
clockType.style.display = "";
clockSource.style.display = "";
This also eliminates the need to execute a browser check which is not good practice.
EDIT:
I misunderstood your question before. However, I tested your code here and it seems to work fine (tested in FF 3.5.3, Chrome 4, IE8).
Does #clockType and #clockSource elements have css class that sets display style? In this case I'd tried to remove it and set display style inline.