Menu
I've been pouring over my code over and over again and I just can't see why it's not working correctly...
Can someone enlighten me? What's the issue here? I just don't see it.
The code should allow the user to enter various values into textboxes to change some of the image's features such as border size, color, width, height, image alt text, and image title.
This is my code:
<html>
<head>
<title>Image Properties</title>
<script type="text.javascript">
function changeImage() {
//applies a new border size
document.getElementById('img').border = document.getElementById('bs').value;
//applies a new border color
document.getElementById('img').style.borderColor = document.getElementById('bc').value;
//applies a new width
document.getElementById('img').width = document.getElementById('bw').value;
//applies a new height
document.getElementById('img').height = document.getElementById('bh').value;
//applies a new alt tag
document.getElementById('img').alt = document.getElementById('ba').value;
//applies a new title
document.getElementById('img').title = document.getElementById('bt').value;
}
</script>
</head>
<body>
<h2>Change Image Properties</h2>
<img src="KotakuLogo.jpg" id="img" />
<p>
Border Size:<input type="text" id="bs"
onfocus="this.style.background='#c3c3c3'"
onblur="this.style.background='#FFFFFF'"/><br />
New Border Color:<input type="text" id="bc"
onfocus="this.style.background='#c3c3c3'"
onblur="this.style.background='#FFFFFF'"/><br />
New Border Width:<input type="text" id="bw"
onfocus="this.style.background='#c3c3c3'"
onblur="this.style.background='#FFFFFF'"/><br />
New Border Height:<input type="text" id="bh"
onfocus="this.style.background='#c3c3c3'"
onblur="this.style.background='#FFFFFF'"/><br />
New Border Alt Tag:<input type="text" id="ba"
onfocus="this.style.background='#c3c3c3'"
onblur="this.style.background='#FFFFFF'"/><br />
New Border Title:<input type="text" id="bt"
onfocus="this.style.background='#c3c3c3'"
onblur="this.style.background='#FFFFFF'"/><br />
<input type="button" value="Submit Image Changes" onclick="changeImage()" />
</body>
</html>
210
The problem is that your script is not interpreted because you put it in the script with wrong type:
<script type="text.javascript">...</script>
Change it to correct text/javascript and it will work. Or even better: remove type attribute as redundant, text/javascript is the default type anyway.
And finally, instead of onfocus="this.style.background='#c3c3c3'" onblur="this.style.background='#FFFFFF'" use CSS:
input:focus {
background: #c3c3c3;
}
First of all, document.getElementById takes a bit of time to run, so you should store its result instead of calling it ten times.
var elem = document.getElementById('img');
elem.something = "example";
elem.somethingElse = 1234;
border is deprecated on an image. You should interact with the style of the element directly instead. The border CSS property covers all styles at once and must be written SIZEunit style color such as 5px solid black.
elem.style.border = document.getElementById('bs').value + "px solid " + document.getElementById('bc').value;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
