Javascript - how to pass value into javascript code

Question

I have been having a lot of trouble trying to get value into javascript and pass it to alert. Here is the code that I use to pass the value....

        <img onclick="handpost()" id="colorface" name="red" src="http://www.asl-ela.org/image/redface.png" alt="Red face" /></a>

Then I use function to get the data from img tag....

<script type="text/javascript">
   function handpost()  {
      var color = document.getElementById('colorface').name;
      alert(color);
   }
</script>

I keep getting alert box saying undefined. What does that mean?!?!?!

Since name is a property of img element. You should use getAttribute to get its value, try this document.getElementById('colorface').getAttribute('name') — andorx
– andorx, Commented May 29, 2016 at 1:51
Since name is not a standard property on img attributes, you shouldn't use it. Instead, it is better to use data-name as the whole data-* realm as been reserved for custom values. developer.mozilla.org/en-US/docs/Web/Guide/HTML/… .. these values can also be accessed via jQuery's data method or getAttribute('data-name') — Jeremy J Starcher
– Jeremy J Starcher, Commented May 29, 2016 at 1:57

Alex Kudryashev · Accepted Answer · 2016-05-31 23:57:06Z

9

It means exactly what it reads: document.getElementById('colorface').name is undefined. document.getElementById('colorface') may exist but it doesn't have property name. Try document.getElementById('colorface').getAttribute('name').
name is not standard attribute of img but if you add it then you can access it.

edited May 31, 2016 at 23:57

answered May 29, 2016 at 1:54

Alex Kudryashev

9,5103 gold badges31 silver badges39 bronze badges

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

2 Comments

Alex Kudryashev Over a year ago

I changed name to .getAttribute('name') and it works.

Harrison F Parson Jr Over a year ago

Hi Alex, I did use the code that you suggested. I tried it and the alert box says null. I tried it in jfiddle and it works as it says red. So what is going on? Thanks

Unheilig · Accepted Answer · 2016-05-29 02:01:04Z

3

Use the following instead :

var color = document.getElementById('colorface').getAttribute('name');

edited May 29, 2016 at 2:01

Unheilig

16.3k193 gold badges71 silver badges101 bronze badges

answered May 29, 2016 at 1:55

Ahmed Fouzan

1042 silver badges10 bronze badges

Comments

Rayon · Accepted Answer · 2016-05-29 02:25:42Z

0

Not sure how could you get it as undefined

Element.name, name gets or sets the name property of a DOM object; it only applies to the following elements: <a>, <applet>, <button>, <form>, <frame>, <iframe>, <img>, <input>, <map>, <meta>, <object>, <param>, <select>, and <textarea>(From MDN)

function handpost() {
  var color = document.getElementById('colorface').name;
  alert(color);
}

<img onclick="handpost()" id="colorface" name="red" src="http://www.asl-ela.org/image/redface.png" alt="Red face" />

answered May 29, 2016 at 2:25

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

Collectives™ on Stack Overflow

Javascript - how to pass value into javascript code

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related