3

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>
Citra45Abadi
  • 207
  • 1
  • 6
  • 21

1 Answers1

8

It may fail to work from 2 reasons:

  1. JSFiddle wraps all JavaScript code within an anonymous function by default, so your close() function is never exposed to the main scope.
  2. 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.

Wiktor Bednarz
  • 1,553
  • 10
  • 15
  • 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 – Citra45Abadi Jan 16 '17 at 02:40
  • 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. – Ghasan غسان Jan 16 '17 at 02:43
  • 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](https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/) and [Unobtrusive JavaScript](https://en.wikipedia.org/wiki/Unobtrusive_JavaScript#Separation_of_behavior_from_markup). Good luck! ;-) – Wiktor Bednarz Jan 16 '17 at 02:46
  • thanks. toddmoto site cannot be opened though – Citra45Abadi Jan 16 '17 at 02:46
  • 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?](http://stackoverflow.com/questions/500431/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. – Wiktor Bednarz Jan 16 '17 at 02:52