Develop Reference

how to change style display background image url

function btnclick() {
var btn = document.getElementById('M_menucol').style.display;
if (btn == 'none')
{
document.getElementById('M_menucol').style.display = 'block';
document.getElementById('M_menubtn').style.backgroundImage = "url(.../image/cancel.png)";
}
else {
document.getElementById('M_menucol').style.display = 'none';
document.getElementById('M_menubtn').style.backgroundImage = "url(.../image/menubtn.png)";
}
};
i want change display none to block and reverse + backgroundimage url
display change is working but background image change dont working
plz give me solution...
sorry for my bad english
I'm sorry my meaning was that when I click the button it opens a menu, and the button's image changes. Clicking the button again closes the menu and returns the image to its original state.
And I will study hard ;)
https://jsfiddle.net/phnzb10m/12/

Here is how I would do this:
function btnclick() {
var btn = document.getElementById('M_menucol');
if(btn != null) {
btn.classList.toggle("cancel")
}
};
The style.css file would contain something like this:
#M_menucol{
display: none;
background-image: url(.../image/menubtn.png);
}
.cancel{
display: block;
background-image: url(.../image/cancel.png);
}

In your fiddle why do you separated col, btn with comma when you setting the style of them ? i think you mean semicolon instead
In your fiddle the element id is Mmenubtn while you write it M_menubtn in the script
you should know that style is an object of elements so it's cannot output the style sets by style or link tags it's just output inline style or style sets to it by js
if you want to get style sets by style or link tags you will be need to use getComputedStyle() method
by default when there's no any inline style the values of style object properties is empty string so you can check if it's return empty string or none then execute you script
By Display Property
function btnclick() {
var col = document.getElementById('M_menucol');
var btn = document.getElementById('M_menubtn');
if (col.style.display === "" || col.style.display == 'none') {
col.style.display = 'block'
btn.style.backgroundImage = "url(https://postimg.cc/68V0PW0t)";
} else {
col.style.display = 'none'
btn.style.backgroundImage = "url(https://i.postimg.cc/vBVMcpmM/menubtn.png)";
}
}
By getComputedStyle() Method
function btnclick() {
var col = document.getElementById('M_menucol');
var btn = document.getElementById('M_menubtn');
if (getComputedStyle(col, null).display == 'none') {
col.style.display = 'block';
btn.style.backgroundImage = "url(https://postimg.cc/68V0PW0t)";
} else {
col.style.display = 'none';
btn.style.backgroundImage = "url(https://i.postimg.cc/vBVMcpmM/menubtn.png)";
}
}

Find out if id equals visible or hidden

I don't understand why this passes my if condition when I hide my Div element above. I'm trying to figure out a way to write if div id equals visible then alert the user "content visible". If my div id equals hidden then alert the user "content hidden"
//document.getElementById("myDiv").style.visibility = "visible";
document.getElementById("myDiv").style.visibility = "visible";
var status = document.getElementById("myDiv").style.visibility;
if($("#myDiv").is(":visible") == true){
alert("visible JQuery");
}
if (document.getElementById("myDiv").style.visibility === "hidden")
{
alert("visible JS");
}
alert(status);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="myDiv">Hello</div>

Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout.
jQuery :visible
The :visible selector will only work for the attribute display.
What you can do is:
if ($("#myDiv").css("visibility") == "hidden") {
// do something when hidden ...
}

This seems to work for me:
document.getElementById("myDiv").style.visibility = "visible";
document.getElementById("myDiv").style.visibility = "hidden";
if($("#myDiv").css("visibility") !== "hidden") {
alert("visible JQuery");
}
if (document.getElementById("myDiv").style.visibility === "hidden") {
alert("hidden JS");
}
Codepen:
https://codepen.io/foozie3moons/pen/OxgomO
EDIT
Updated my response as if you were not setting visibility to visible.

visibility = 'hidden' still takes up space in the browser, and so jQuery reports as ":visible". If you did style.display = 'none', your jQuery visible check wouldn't fire.

Changing Text in div without toggling Div Visiblity

In my Div (Code Below) there is an onClick function that triggers the visibility of a second div, and there is also a content edible in the div as well. When I click to change the text it also triggers the visibility of the second div. How would I change the code so that I can click the text without changing the second div's visibility?
<div class="div1" id ="div1" onclick="onStepClicked()" style ="text-align:center"><p contenteditable="true" >Step 1</p></div>
Function:
function onStepClicked() {
var elem = document.getElementById('div2');
if (Visible === true) {
elem.style.display = 'none';
Visible = false;
}
else {
if (Visible === false) {
elem.style.display = 'block';
Visible = true;
}
}
}

You may trigger the click on the Parent div only and exclude the click on child in jQuery like this:
$("#div1").click(function(){
$("#div2").css('visibility','hidden');
}).children().click(function(e) {
return false;
});
If you are not OK with jQuery and are after a JavaScript - only solution, please leave a comment and let me know.
UPDATE
If you are after a JavaScript solution, here U R:
HTML
<div id ="div1" onclick="onStepClicked()" >
<p id="editable" contenteditable="true">Step 1</p>
</div>
JS
function onStepClicked(){
document.getElementById('div1').onclick = function(e) {
if(e.target != document.getElementById('editable')) {
document.getElementById('div2').style.visibility = 'hidden';
}
}
}

Try using the element>element selector in your script. It will only affect the first child element and then stop from affecting sub-child elements.
Tutorial:
(http://www.w3schools.com/cssref/sel_element_gt.asp)

How do I allow JS onclick with pointer-events:none;?

I have a div over the whole page to close a dropdown menu when the big divis clicked. The thing is that I need pointer-events: none; because if I don't use it, the whole page gets blocked by the big div.
JS onclick won't work when I have pointer-events:none; So, I don't really know how to solve this.
function test() {
if (document.getElementById('div1').style.display == 'block') {
document.getElementById('div1').style.display = 'none';
}
else{
}
}
#big_div{
width: 100%;
height: 100%;
display: block;
pointer-events:none;
}
<div id="big_div" onclick="test()"></div>

Instead of using a div covering your whole page, put a click listener on the document, check to see if the clicked element is the menu or a child of the menu, if not then hide the menu
document.addEventListener("click",function(e){
var menu = document.getElementById("myMenu");
var target = e.target;
if(target !== menu && !menu.contains(target)){
menu.style.display = "none";
}
});
Demo
document.addEventListener("click",function(e){
var menu = document.getElementById("myMenu");
var target = e.target;
var openBtn = document.querySelector("button");
if(target !== menu && !menu.contains(target) && target !== openBtn){
menu.style.display = "none";
}
});
document.querySelector("button").addEventListener("click",function(){
document.getElementById("myMenu").style.display = "block";
});
menu {
width:120px;
height:300px;
background:#88DDFF;
display:none;
}
<menu id="myMenu"><span>some item</span></menu>
<button>Open menu</button>

pointer-events: none means no events will come through. Instead, you should close the menu by listening to click/mousedown events on the entire document (and remove your div that is set to pointer-events: none).
document.addEventListener('mousedown', function(e) {
// You may need a better check involving e.target because
// you won't want to close the menu when clicking inside the menu
// or on the button (if the menu is not open)
if (!e.target.contains(menuNode)) {
document.getElementById('div1').style.display = 'none';
}
});

Sorry, I didn't read your question carefully so I got downvotes for my wrong answer.
But, according to your question, you want to cover the whole page with that div to block the click event but you still want to receive the click event then you can do like this actually:
1) Remove pointer-events:none; from that div and add the cursor:
#big_div {
width: 100%;
height: 100%;
display: block;
cursor: none;
}
2) Add the listener to your div like I previously mentioned and prevent the click from there:
document.getElementById("big_div").addEventListener("click", function(e) {
e.preventDefault();
// Do whatever you want to do
if (document.getElementById('div1').style.display == 'block') {
document.getElementById('div1').style.display = 'none';
}
});

JavaScript onclick requires two clicks

My problem is that when onclicktriggers the toggleNew function it's not executing but when I click the div a second time it's executing just as it should...
HTML:
<div id="aside_main">
<div onclick="toggleNew();">click</div>
content
</div>
<div id="aside_new">
content
</div>
JS:
function toggleNew() {
var e = document.getElementById('aside_main');
var se = document.getElementById('aside_new');
if(e.style.display == 'block') {
e.style.display = 'none';
se.style.display = 'block';
} else {
e.style.display = 'block';
se.style.display = 'none';
}
}
CSS:
#aside_main {
display: block;
}
#aside_new {
display: none;
}
What is happening here and how can I make the function work the first time a user clicks the div?

This will not work properly because you are using following line inside 'div#aside_main' which is going to be hidden.
<div onclick="toggleNew();">click</div>
Try keeping it outside like this-
<div onclick="toggleNew();">click</div>
<div id="aside_main">
content
</div>
<div id="aside_new">
content2
</div>
Also in javascript it is not checking for 'e.style.display' first time in if condition.
Try using
if(e.offsetWidth > 0 || e.offsetHeight > 0){
e.style.display = 'none';
se.style.display = 'block';
}
else
{
e.style.display = 'block';
se.style.display = 'none';
}

You need to call the function like onclick="toggleNew();" in the div onclick. I just added your code in fiddle.

May not be the best answer, but the fix was to use inline css by style attribute.
Like this:
<div id="aside_main" style="display: block; border: 2px solid green;">
<div onclick="toggleNew();">click</div>
content
</div>
<div id="aside_new" style="display: none; border: 2px solid red;">
content
</div>

e.style.display represents the style of the element defined by the style attribute, it does not give you the computed style. to get the computed style use
if (window.getComputedStyle(e,null).getPropertyValue("display") == 'block){

I had the same double click required issue. I was using an internal style sheet which was correctly setting the display like this.
When loading the HTML file #YourID was not visible as expected.
#YourID {
display: none;
}
When clicking the button tied to the function I noticed that the first click set the inline display to style="display: none;". The second click set the inline style="display: block;" and of course then it displayed as expected.
I found that I needed to set the element directly inline with style="display: none;" and just removed the intern style sheet entry (Above "#YourID").
I'm doubtful that this is 100% the correct answer in every scenario but it would seem the underlying issue is caused by the element not being set in the appropriate initial state for the function to act on it properly.
https://jsfiddle.net/em05a1kf
<div id="YourID" style="display: none;">
<b>Super Hidden Content</b>
</div>
<button onclick="ToggleID('YourID');">Do Foo</button>
<script type="text/javascript">
function ToggleID(idname) {
var x = document.getElementById(idname);
(x.style.display === "none") ? (x.style.display = "block") : (x.style.display = "none");
return false;
}
</script>

In your condition : Use onclick="toggleNew();" // calling
This is the way to call a function.
And if you want to Pass the function then you use only toggleNew //passing
They are two different activities.

Here is another way of doing that. You just need to add two lines to your javascript code-
document.getElementById('aside_main').style.display='block';
document.getElementById('aside_new').style.display='none';
set initial display property in javascript. This will work fine.

One way (for me the simplest way) to solve this is by counting clicks.
For this purpose you set the new intiger variable click to 0 outside of your function toggleNew() and everytime you call your function you increase variable click for 1 like this:
<script> var click = 0;
function toggleNew() {
click = click +1;
var e = document.getElementById('aside_main');
var se = document.getElementById('aside_new');
if (click > 1) {
if(e.style.display == 'block') {
e.style.display = 'none';
se.style.display = 'block';
} else {
e.style.display = 'block';
se.style.display = 'none';
}
} else {
e.style.display = 'none';
se.style.display = 'block';
}
}
</script>