Changing border in Javascript

Question

I have been learning Javascript and I'm a little confused as to why this doesn't work. I'd like it so if you click the div, it creates a red border around it:

JSFiddle link

HTML:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>Generation X</title> </head> <body> <script src="test.js"></script> <div id="clickHere" onclick="run()"> <p>Hello</p> </div> </body> </html>

Javascript:

function run() { document.getElementById("clickHere").style.border = thick solid red; alert("Changed"); }

gurvinder372 · Accepted Answer · 2016-06-19 10:08:40Z

2

make it ..updated fiddle (you need to wrap it in the head tag)

function run(thisObj) { thisObj.style.border = "1px solid red"; //or "1px solid #ff000" alert("Changed"); }

also, rather than getting the reference to element again, simply pass the reference during the time of invocation.

answered Jun 19, 2016 at 10:08

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

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

6 Comments

Amin Jafari Over a year ago

or maybe at the end of body

gurvinder372 Over a year ago

@AminJafari I was talking about his fiddle configuration.

Dean Hampson Over a year ago

I've tried this, it doesn't seem to work. Thanks for replying! Guess I don't quite understand your method :p

gurvinder372 Over a year ago

@DeanHampson did you checked the fiddle i have attached?

Dean Hampson Over a year ago

Thanks so much, it's the quotes I was missing. +1

|

tonysan · Accepted Answer · 2016-06-19 10:16:08Z

So, instead of putting an onClick on div, use a addEventListener should be better.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Event_attributes

https://jsfiddle.net/5jsbhbhu/5/

var run = function() { document.getElementById("clickHere").style.borderColor = "red"; document.getElementById("clickHere").style.borderWidth = "1px"; document.getElementById("clickHere").style.borderStyle = "solid"; alert("Changed"); }; var node = document.getElementById('clickHere'); node.addEventListener('click', run);

Thanks, tony. May I ask; what was the problem exactly? I have no idea how thed event listener made it work.
I don't know the onClick on div is standard or not, I've never put that in div, as presentation should be separation from business logic.

Collectives™ on Stack Overflow

Changing border in Javascript

2 Answers 2

6 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Related