CODEWITHSUNDEEP
javascripthtml
Shauna
Shauna

Reputation: 181

Display items from list into a div

I have two div tags with lists inside.

Using Javascript I am trying to put each item from the "intoleranceList" into a string and then display it in the "info" div tag. Can anyone help? Here's my Javascript trying to do this. 

var area= document.getElementById("info");
var listArea = document.getElementById("intoleranceList").getElementsByTagName("li");
var intoleranceArray = [];
for(let i = 0; i < listArea.length; i++) {
   intoleranceArray[i] = listArea[i].innerHTML;
}
var intoleranceString = intoleranceArray.toString();
area.innerHTML = intoleranceString;
<div id = "intoleranceList">
  <ul class = "list">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>
<div id = "nonIntoleranceList">
  <ul class = "list">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>
<div id = "info"></div>

Upvotes: 1

Views: 1315

Answers (2)

abdulrahman alaa
abdulrahman alaa

Reputation: 557

I tried to achieve this using Javascript ES5 :

window.onload = function () {
  var intoleranceList = document.querySelectorAll('#intoleranceList li');
  var intoleranceListStrings = getStringListFromLi();

	AddStringsToInfo(intoleranceListStrings);

  function AddStringsToInfo(arr) {
    var infoElement = document.getElementById('info');
    infoElement.textContent = arr.join(',');
  }

  function getStringListFromLi(){
    var intoleranceListStrings = [];
    for(var i=0;i<intoleranceList.length;i++){
      intoleranceListStrings.push(intoleranceList[i].textContent);
    }
    return intoleranceListStrings;
	}
}
<div id="intoleranceList">
  <ul class="list">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>
<div id="nonIntoleranceList">
  <ul class="list">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>
<div id="info"></div>

And using ES6

window.onload =  () => {
  const intoleranceList = document.querySelectorAll('#intoleranceList li');

  const AddStringsToInfo = (arr) =>  {
    const infoElement = document.getElementById('info');
    infoElement.textContent = arr.join(',');
  }

  const getStringListFromLi = () => {
    const intoleranceListStrings = [];
    for(let i=0; i<intoleranceList.length ;i++){
      intoleranceListStrings.push(intoleranceList[i].textContent);
    }
    return intoleranceListStrings;
	}

  const intoleranceListStrings = getStringListFromLi();
	AddStringsToInfo(intoleranceListStrings);

  
}
<div id="intoleranceList">
  <ul class="list">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>
<div id="nonIntoleranceList">
  <ul class="list">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>
<div id="info"></div>

Upvotes: 1

Thales Maia
Thales Maia

Reputation: 189

You can do something like this:

const intolanceList = document.querySelectorAll("#intoleranceList > ul > li");//only select li's inside a ul tag and inside a intoleranceList id
const info = document.getElementById("info");
const text = [];

intolanceList.forEach(i => {
  text.push(i.textContent)//catch every text and push to array
})

info.textContent = text.join(" ")//catch array and transform in string with spaces between itens

Upvotes: 2

Related Questions