Javascript to find content

Question

Hi I am using code below, but getting 'undefined' as a result. How to fix this? I am not sure how to call for a class within a class.

function myFunction() {    
    document.getElementById("mydiv").innerHTML = document.getElementsByClassName("inline-keyword-marker").innerHTML; 
}

<span class="inline-keyword-marker valid">Product</span>

<p>Click the button to change the text in "mydiv".</p>

<button onclick="myFunction()">Try it</button>

<p id="mydiv">***</p>

`document.getElementsByClassName("inline-keyword-marker")[0]`. Get elementS! — deEr., May 18 '18 at 10:38
Possible duplicate of [What do querySelectorAll, getElementsByClassName and other getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) — Sebastian Simon, May 18 '18 at 10:44

CodeF0x · Accepted Answer · 2018-05-18T11:04:25.027

Note: As getElementS states, getElementsByClassName returns an array like HTMLCollection.

So inorder to access the first element (your class inline-keyword-marker), you need to add [0] to your method like this:

document.getElementsByClassName('inline-keyword-marker')[0]

function myFunction() {
  document.getElementById("mydiv").innerHTML = document.getElementsByClassName("inline-keyword-marker")[0].innerHTML;
}

<span class="inline-keyword-marker valid">Product</span>

<p>Click the button to change the text in "mydiv".</p>

<button onclick="myFunction()">Try it</button>

<p id="mydiv">***</p>

You might also to read this. It explains your issue more detailed than I did.

To handle all your classes, you can use this method:

function myFunction() {
  var classes = document.getElementsByClassName('inline-keyword-marker'); // Get all elements
  var myDiv = document.getElementById('mydiv'); // Get the div for the result

  myDiv.innerHTML = ""; // At first, we clear the result div; not neccessary, just for the optic
  
  // Because we got a HTMLCollection back, we need to loop through it
  for (var i = 0; i < classes.length; i++) {
    myDiv.innerHTML += classes[i].innerHTML + "<br>"; // With [i] we access every element -> at first the first one, then the second on and so on
    // I also added a <br> tag, so the results get append beneath each other, not next to each other
  }
}

<span class="inline-keyword-marker valid">Product1</span>
<span class="inline-keyword-marker valid">Product2</span>
<span class="inline-keyword-marker valid">Product3</span>
<span class="inline-keyword-marker valid">Product4</span>
<span class="inline-keyword-marker valid">Product5</span>

<p>Click the button to change the text in "mydiv".</p>

<button onclick="myFunction()">Try it</button>

<p id="mydiv">***</p>

The answer is already given in the comment.So why post it again? — Krishna Prashatt, May 18 '18 at 10:44
@KrishnaPrashatt True, but I wanted to explain the solution in a more detailed way. — CodeF0x, May 18 '18 at 10:46
Hi, many thanks for a answer - however, I just realised that class "inline-keyword-marker" occurs multiple times. How to I modify the code to create a list of contents of all occurrences in a page? — Vijaysinh Patil, May 18 '18 at 10:48
@VijaysinhPatil So you want to display the `innerHTML` of every class `inline-keyword-marker` on your page? — CodeF0x, May 18 '18 at 10:51
@CodeF0x, yes. There are several of these classes and I want to extract their content into a list. — Vijaysinh Patil, May 18 '18 at 10:57

score 0 · Answer 2 · answered May 18 '18 at 10:52

Problem :

document.getElementsByClassName returns an array and not a single value so in order to select one you can do this [i] where is the index of the elements so :

document.getElementsByClassName("inline-keyword-marker")

becomes :

document.getElementsByClassName("inline-keyword-marker")[0]

and selects the first element with class inline-keyword-marker

So total JavaScript becomes :

myFunction = () => {
  document.getElementById("mydiv").innerHTML = document.getElementsByClassName("inline-keyword-marker")[0].innerHTML; 
}

Shorter :

myFunction = () => (d=document).getElementById("mydiv").innerHTML = d.getElementsByClassName("inline-keyword-marker")[0].innerHTML

<span class="inline-keyword-marker valid">Product</span>

<p>Click the button to change the text in "mydiv".</p>

<button onclick="myFunction()">Try it</button>

<p id="mydiv">***</p>

Javascript to find content

2 Answers2

Problem :

Shorter :