Geek Answers Handbook

Javascript Image Properties

I have uploaded my code again and again, and I just don’t understand why it does not work correctly ...

Can someone enlighten me? What is the problem here? I just don't see it.

The code should allow the user to enter various values ​​in the text fields to change some functions of the image, such as border size, color, width, height, image text and image name.

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>
+5
source share
2 answers

The problem is that your script is not being interpreted because you are putting it in a script with the wrong type:

 <script type="text.javascript">...</script>

Modify it to fix text/javascript and it will work. Or even better: remove the type attribute as redundant, anyway the text / javascript is the default type.

And finally, instead of onfocus="this.style.background='#c3c3c3'" onblur="this.style.background='#FFFFFF'" use CSS:

 input:focus { background: #c3c3c3; }
+6
source

First of all, document.getElementById takes a little time to run, so you should save its result, and not call it ten times.

 var elem = document.getElementById('img'); elem.something = "example"; elem.somethingElse = 1234;

border deprecated in the image. Instead, you should interact with the style of the element. The CSS border property covers all styles at once and must be written in SIZEunit style color , for example 5px solid black .

 elem.style.border = document.getElementById('bs').value + "px solid " + document.getElementById('bc').value;
+1
source

More articles:


All Articles