I want to write a function that surrounds an image with a border frame each time i click on it. unf. i can't make it work. deny any typos cause i didn't copy paste it. the function works. but no affect is being made on the image when clicking on it. did i access the border attribute right?
my function:
<script>
function mark(imageId) {
document.getElementById(imageId).style.border = "1";
}
</script>
my html body:
<input id="imageId" src="\images\image1.png" onclick="mark(imageId)"/>
I want to write a function that surrounds an image with a border frame each time i click on it. unf. i can't make it work. deny any typos cause i didn't copy paste it. the function works. but no affect is being made on the image when clicking on it. did i access the border attribute right?
my function:
<script>
function mark(imageId) {
document.getElementById(imageId).style.border = "1";
}
</script>
my html body:
<input id="imageId" src="\images\image1.png" onclick="mark(imageId)"/>
6 Answers
Reset to default 9Your markup doesn't quite make sense, but:
<input id="imageId" type="image" src="http://goo.gl/UohAz" onclick="mark(this)"/>
function mark(el) {
el.style.border = "1px solid blue";
}
http://jsfiddle/8QGkq/
Setting the border to "1" didn't work for me. Try this:
<script>
function mark(imageId) {
document.getElementById(imageId).style.border = "1px solid black";
}
</script>
You'll also need to surround imageId in the HTML in quotes (not sure if that was a typo or not):
<input id="imageId" src="\images\image1.png" onclick="mark('imageId')"/>
You don't want getParameter(). You want getElementById().
You also don't want the variable name imageId surrounded by quotes inside the function declaration for mark() because that changes it to a string.
And as @John Girata points out, you want to specify more than just "1" for the border value.
document.getElementById(imageId).style.border = "1px solid black";
Furthermore, you need to quote "imageId" in your onclick attribute:
<input id="imageId" src="\images\image1.png" onclick="mark('imageId')"/>
This is a code for that question.
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function sayHello() {
var boyElement = document.getElementById("boy");
boyElement.style.border = "3px solid red";
}
</script>
<img src="C:\Users\Acer\Desktop\new web site\js\images\boy.png" id="boy"
onclick="sayHello()">
</body>
</html>
To clarify, setting borders with a DOM element, you need to provide width, color, style like:
document.getElementById("ex1").style.border="1px solid #0000FF";
w3Schools actually says: http://www.w3schools./jsref/prop_style_border.asp
Look at this :
<img id="CN" src="CN.png" onclick="fnChangeBorder('CN')">
and define your function:
function fnChangeBorder(imageId)
{document.getElementById(imageId).style.border = "solid #AA00FF";}