Cannot change css attribute via javascript function [duplicate]

Question

This is just a simple javascript code to change display or background or just to see if I can change the css attribute using javascript at all.

This is based on an example.

But for some reason, I cannot change the attribute using the js function I defined myself.

HTML code

<div id="question"> testting javascript</div>
<button onclick="close()">Close</button>

JS code

function close(){
    document.getElementById("question").style.display = "none";
    document.getElementById('question').style.backgroundColor = "#f3f3f3";
}

The JSfiddle

The Full code

<div id="question"> testting javascript</div>
<button onclick="close()">Close</button>
<script>
function close(){
    document.getElementById("question").style.display = "none";
    document.getElementById('question').style.backgroundColor = "#f3f3f3";
}
</script>

Didi you use your function inside $('document').ready(function(){});? — Luiz Henrique
– Luiz Henrique, Commented Jan 16, 2017 at 2:32
@LuizHenrique that's jQuery, and OP isn't referencing jQuery anywhere. — Michael Coker
– Michael Coker, Commented Jan 16, 2017 at 2:32
use a different name for close - because window.close is already a function - jsfiddle.net/jaromanda/5oc62qbe/12 — Jaromanda X
– Jaromanda X, Commented Jan 16, 2017 at 2:34

Wiktor Bednarz · Accepted Answer · 2017-01-16 02:35:09Z

8

It may fail to work from 2 reasons:

JSFiddle wraps all JavaScript code within an anonymous function by default, so your close() function is never exposed to the main scope.
You chose the name close which is existing JavaScript method for closing the window: window.close.

The code below is working:

window.closeQuestion = function() {
  document.getElementById("question").style.display = "none";
  document.getElementById('question').style.backgroundColor = "#f3f3f3";
};

/*/ This is a way of having a full control over your JavaScript functions and events: /*/
document.getElementById('closeBtn').addEventListener('click', function() {
  closeQuestion();
});

#question {
  background : red;
}

<div id="question"> testting javascript</div>

<!-- This is lame: -->
<button onclick="closeQuestion()">Close</button>

<!-- This is better: -->
<button id="closeBtn">Close (better)</button>

You should handle events in JavaScript anyway. Using on* attributes is so last century. See addEventListener.

answered Jan 16, 2017 at 2:35

Wiktor Bednarz

1,55311 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Citra45Abadi Over a year ago

thanks. it is so last century for people who have experience. but I'm just starting to learn javascript that is why even the most basic confuses me. addEventListener and window.functionname <- I will look into this more

Ghasan غسان Over a year ago

I would say it fails for both reasons you mentioned. If I change the name into something else, then I get an error log of a function that does not exist. That means before it did not find it, and assumed it is window.close function.

Wiktor Bednarz Over a year ago

It's alright! Just keep that in mind while learning, so you can smoothly transition into writing a better code in the future! I recommend learning more about JavaScript scopes and Unobtrusive JavaScript. Good luck! ;-)

Citra45Abadi Over a year ago

thanks. toddmoto site cannot be opened though

Wiktor Bednarz Over a year ago

If the website doesn't work, there's also a great set of examples in the question What is the scope of variables in JavaScript? here on StackOverflow. It can be a bit confusing at first, so I'll drop a little hint: Everything you define in a global scope ends up under a window. variable.

Collectives™ on Stack Overflow

Cannot change css attribute via javascript function [duplicate]

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related