Getting the title attribute using javascript

Question

I am fairly new to JavaScript and I am working on a project the uses facial recognition to detect emotion. The facial recognition part is detecting emotion but I need to access the resulting emotion. There's constant feedback coming from the facial recognition API and the results constantly change under the "div" id= results tag

<div id="results" style="word-wrap:break-word;">
<span> Timestamp: 93.12 </span>
<br>
<span>Number of faces found: 1</span>
<br>
<span> Appearance: {"gender":"Male","glasses":"Yes","age":"25 - 34","ethnicity":"Black African"}</span><br><span>Emotions: {"joy":0,"sadness":0,"disgust":1,"contempt":0,"anger":0,"fear":0,"surprise":0,"valence":0,"engagement":0}
</span>
<br>
<span> Emoji: 
<img class="chromoji" title="Neutral Face" alt=":neutral_face:"     src="chrome-extension://cahedbegdkagmcjfolhdlechbkeaieki/images/apple/1f610.png"></span>
<br>
</div>

The title "Neutral Face" or alt is one of the attributes of the dominant emotion needed

I tried using solutions from

Extract property of a tag in HTML using Javascript and How to get title attribute from link within a class with javascript

in my actual code I have

<div id="results" style="word-wrap:break-word;">
               <script>
                 //var images = document.querySelectorAll('img');
                 var emotion = document.getElementByTagName("img")[0].getAttributes("title");
                 console.log(emotion)
               </script>
             </div>

I tried to use the last two lines of code in this snippet in a JS file that produces the results:

detector.addEventListener("onImageResultsSuccess", function(faces, image, timestamp) {
  $('#results').html("");
  log('#results', "Timestamp: " + timestamp.toFixed(2));
  log('#results', "Number of faces found: " + faces.length);
  if (faces.length > 0) {
    log('#results', "Appearance: " + JSON.stringify(faces[0].appearance));
    log('#results', "Emotions: " + JSON.stringify(faces[0].emotions, function(key, val) {
      return val.toFixed ? Number(val.toFixed(0)) : val;
    }));
    log('#results', "Emoji: " + faces[0].emojis.dominantEmoji);
    drawFeaturePoints(image, faces[0].featurePoints);
    var motion =  faces[0].emojis.dominantEmoji;
    log('#results', motion);
  }
});

also on a separate time I added this to the JavaScript file that needs the feedback for the emotion recognition

var tag = document.getElementByTagName("img")
      var emotion= tag.getAttribute("title");
      console.log(emotion);

also on another separate trial I did this in the index html file

<script type="text/javascript">
                var image = document.getElementsByTagName("img")[0];
                var title = image.getAttribute("title");
                console.log(title); // shows the value of title for the element "image"
              </script>

The main idea of the project is to detect a users emotion and play music based on that emotion

Did you try something like `$('#results img').attr('title')`? — dtkaias, Dec 13 '16 at 04:11
better yet post what you have done not a link of other solution — guradio, Dec 13 '16 at 04:12
We have no idea why they don't work unless you show the code that doesn't work. See [mcve] — charlietfl, Dec 13 '16 at 04:14
var emotion = document.getElementByTagName("img")[0].getAttributes("title"); I tried this before — Kelvin Njeri, Dec 13 '16 at 04:15
ok so don't put code blobs in comments. Edit the actual question with formatted code that is readable along with any other clarifcation updates that are relevant — charlietfl, Dec 13 '16 at 04:19
@ Mukesh Panchal and @ Rohit Jindal Thank you for helping out. Yes I tried your answers — Kelvin Njeri, Dec 15 '16 at 17:12

score 8 · Accepted Answer · edited Jul 07 '20 at 10:02

8

You can try this:

<script type="text/javascript">
    var image = document.getElementsByTagName("img")[0];
    var title = image.getAttribute("title");

    console.log(title); // shows the value of title for the element "image"
</script>

See demo here: http://codepen.io/anon/pen/vyVQBJ

edited Jul 07 '20 at 10:02

vvvvv

25,404
19
49
81

answered Dec 13 '16 at 05:34

Mukesh Panchal

1,956
2
18
31

I keep getting errors that .getElementsByTagName is not a function and cannot read property of .getAttribute – Kelvin Njeri Dec 14 '16 at 04:52

Nick Winner · Answer 2 · 2016-12-13T04:36:34.283

0

In one of your comments, you said you tried

var emotion = document.getElementByTagName("img")[0].getAttributes("title"‌);

Try instead using

var emotion = document.getElementsByTagName("img")[0].getAttribute("title"‌);

The function getAttribute() has no s at the end, while the function getElementsByTagName has an s after elements. Also, in your script tag, declare it as javascript like,

<script type="text/javascript"> // your code </script>

Don't forget a semicolon after console.log(emotion);

edited Dec 13 '16 at 04:36

answered Dec 13 '16 at 04:24

Nick Winner

261
2
11

I tried that it's not printing out anything to the console – Kelvin Njeri Dec 13 '16 at 04:33
@KelvinNjeri I edited my answer from your edited post – Nick Winner Dec 13 '16 at 04:36
I keep getting errors that .getElementsByTagName is not a function and cannot read property of .getAttribute – Kelvin Njeri Dec 14 '16 at 04:52

score 0 · Answer 3 · answered Dec 13 '16 at 06:00

0

Instead of using getAttributes("title"‌) use getAttribute("title"‌) as there is no function like getAttributes in JavaScript.

Working demo :

var emotion = document.getElementsByTagName("img")[0].getAttribute("title");
console.log(emotion);

<img class="chromoji" title="Neutral Face" alt=":neutral_face:"     src="https://i.stack.imgur.com/cp7qK.png" width="400" height="200">

answered Dec 13 '16 at 06:00

Debug Diva

26,058
13
70
123

Mark it as correct so that it will be helpful for others also – Debug Diva Dec 16 '16 at 04:46

Getting the title attribute using javascript

3 Answers3