title: Getting the title attribute using javascript
body: <p><a href="https://i.stack.imgur.com/cp7qK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cp7qK.png" alt="enter image description here"></a></p>
  
  <p>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</p>
  
  <pre><code>&lt;div id="results" style="word-wrap:break-word;"&gt;
  &lt;span&gt; Timestamp: 93.12 &lt;/span&gt;
  &lt;br&gt;
  &lt;span&gt;Number of faces found: 1&lt;/span&gt;
  &lt;br&gt;
  &lt;span&gt; Appearance: {"gender":"Male","glasses":"Yes","age":"25 - 34","ethnicity":"Black African"}&lt;/span&gt;&lt;br&gt;&lt;span&gt;Emotions: {"joy":0,"sadness":0,"disgust":1,"contempt":0,"anger":0,"fear":0,"surprise":0,"valence":0,"engagement":0}
  &lt;/span&gt;
  &lt;br&gt;
  &lt;span&gt; Emoji: 
  &lt;img class="chromoji" title="Neutral Face" alt=":neutral_face:"     src="chrome-extension://cahedbegdkagmcjfolhdlechbkeaieki/images/apple/1f610.png"&gt;&lt;/span&gt;
  &lt;br&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The title "Neutral Face" or alt is one of the attributes of the dominant emption needed</p>
  
  <p>I tried using solutions from </p>
  
  <p><a href="https://stackoverflow.com/questions/22800104/extract-property-of-a-tag-in-html-using-javascript">Extract property of a tag in HTML using Javascript</a>
   and
  <a href="https://stackoverflow.com/questions/19662839/how-to-get-title-attribute-from-link-within-a-class-with-javascript">How to get title attribute from link within a class with javascript</a></p>
  
  <p>in my actual code I have</p>
  
  <pre><code>&lt;div id="results" style="word-wrap:break-word;"&gt;
                 &lt;script&gt;
                   //var images = document.querySelectorAll('img');
                   var emotion = document.getElementByTagName("img")[0].getAttributes("title");
                   console.log(emotion)
                 &lt;/script&gt;
               &lt;/div&gt;
  </code></pre>
  
  <p>I tried to use the last two lines of code in this snippet in a JS file that produces the results </p>
  
  <pre><code>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 &gt; 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);
    }
  });
  </code></pre>
  
  <p>also on a separate time I added this to the JS file that needs the feedback for the emotion recognition</p>
  
  <pre><code>var tag = document.getElementByTagName("img")
        var emotion= tag.getAttribute("title");
        console.log(emotion);
  </code></pre>
  
  <p>also on another separate trial I did this in the index html file</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
                  var image = document.getElementsByTagName("img")[0];
                  var title = image.getAttribute("title");
                  console.log(title); // shows the value of title for the element "image"
                &lt;/script&gt;
  </code></pre>
  
  <p>The main idea of the project is to detect a users emotion and play music based on that emotion</p>