CODEWITHSUNDEEP
javascripthtml
Tom Albanese
Tom Albanese

Reputation: 173

Button element not responding

Simple question, for some reason this piece of code doesn't work, it's not complicated, but whenever I try to run it in browser it doesn't respond. Is there something I'm missing.

<!DOCTYPE html>
<html>
<head>
<style>

body {margin: 0; border: 0; padding: 0; background-color: #F3F781;}

#container {height: 100px; padding: 0; border: 0; margin: 0;}

#box1 {width: 100px; height: 100px; padding: 0px; border: 0px; border-radius: 10px; margin: 0px; outline: 0px; background-color: #F5DA81; display: inline-block;}

#box2 {width: 100px; height: 100px; padding: 0px; border: 0px; border-radius: 10px; margin: 0px; outline: 0px; background-color: #58FA58; display: inline-block;}

#box3 {width: 100px; height: 100px; padding: 0px; border: 0px; border-radius: 10px; margin: 0px; outline: 0px; background-color: #58FAD0; display: inline-block;}

#box4 {width: 100px; height: 100px; padding: 0px; border: 0px; border-radius: 10px; margin: 0px; outline: 0px; background-color: #F5A9F2; display: inline-block;}

</style>

<script>

function write(){
     console.log("hello");
}   

</script>

</head>
<body>

<div id="container">
    <div id="box1"><p id="info">text</p>
    </div>
    <div id="box2"><p>text</p>
    </div>
    <div id="box3"><p>text</p>
        </div>
    <div id="box4"><p>text</p>
    </div>
</div>

<br>

<div>
<button onclick="write()">write</button>
</div>

</body>
</html>

I may be being a bit dence, but for some reason the button script just wont work. I can't see anything wrong with it at all. Is there something I'm missing.

Thanks for any help, and I'm aware of my low quality questions. I just really am quite stuck on this.

Upvotes: 0

Views: 70

Answers (3)

bazeblackwood
bazeblackwood

Reputation: 1204

ᔕᖺᘎᕊ is right.

But you should also consider removing the onclick attribute, just for best practices' sake. Code used this way goes in the global scope, and also runs through eval() which could be a security concern.

Consider scoping it to an input or button's id:

JS:

document.getElementById('btn').onclick = function() {
    console.log('working');
}

HTML:

<div>
    <input id="btn" value="write" type="submit"/>
</div>

http://jsfiddle.net/milesrobinson/e9myj0kw/

Upvotes: 0

user3635683
user3635683

Reputation:

Change your function name to something other than "write()" because that's already an existing javascript method.

Upvotes: 4

ᔕᖺᘎᕊ
ᔕᖺᘎᕊ

Reputation: 3011

You can't use write() as a function name because that might call document.write() - which is what currently happens - when you click the buton, everything disappears, because you're document.write()ing nothing!

Change it to something else, like test()

body {
  margin: 0;
  border: 0;
  padding: 0;
  background-color: #F3F781;
}
#container {
  height: 100px;
  padding: 0;
  border: 0;
  margin: 0;
}
#box1 {
  width: 100px;
  height: 100px;
  padding: 0px;
  border: 0px;
  border-radius: 10px;
  margin: 0px;
  outline: 0px;
  background-color: #F5DA81;
  display: inline-block;
}
#box2 {
  width: 100px;
  height: 100px;
  padding: 0px;
  border: 0px;
  border-radius: 10px;
  margin: 0px;
  outline: 0px;
  background-color: #58FA58;
  display: inline-block;
}
#box3 {
  width: 100px;
  height: 100px;
  padding: 0px;
  border: 0px;
  border-radius: 10px;
  margin: 0px;
  outline: 0px;
  background-color: #58FAD0;
  display: inline-block;
}
#box4 {
  width: 100px;
  height: 100px;
  padding: 0px;
  border: 0px;
  border-radius: 10px;
  margin: 0px;
  outline: 0px;
  background-color: #F5A9F2;
  display: inline-block;
}
<script>
  function test() {
    //console.log("hello");
    alert('hello');
  }
</script>
<div id="container">
  <div id="box1">
    <p id="info">text</p>
  </div>
  <div id="box2">
    <p>text</p>
  </div>
  <div id="box3">
    <p>text</p>
  </div>
  <div id="box4">
    <p>text</p>
  </div>
</div>
<br>
<div>
  <button onclick="test()">write</button>
</div>

Upvotes: 1

Related Questions