Reputation: 5
I am new to JavaScript and this was my first project. I am getting JSON from an API and it is stored in result
. It returns multiple strings when I log it to the console but not when I am manipulating the DOM.
My Code
let len = result[0].meanings.length
for (let i = 0; i < len; i++) {
const element = result[0].meanings[i];
let len2 = element.definitions.length;
for (let j = 0; j < len2; j++) {
let elem = element.definitions[j]
// console.log(elem.definition)
let def = elem.definition
showArea = document.getElementById('showDef')
console.log(def)
showArea.innerHTML = def
}
}
When I am log into the console it gives the output:
Choose and use particular words in order to say or write (something) brain.js:36 A single distinct meaningful element of speech or writing, used with others (or sometimes alone) to form a sentence and typically shown with a space on either side when written or printed.
brain.js:36 A command, password, or signal.
brain.js:36 One's account of the truth, especially when it differs from that of another person.
brain.js:36 The text or spoken part of a play, opera, or other performed piece; a script.
brain.js:36 A basic unit of data in a computer, typically 16 or 32 bits long.
brain.js:36 Used to express agreement.
But when I try to show this all in the DOM, it only shows only one of the strings.
Upvotes: 0
Views: 80
Reputation: 139
showArea.innerHTML = def
Here's the problem you are overwriting it again and again because of the loop
showArea.innerHTML += def
use +=def
which will add a new string to the pre-existing one
Upvotes: 1
Reputation: 1342
try
showArea.innerHTML = showArea.innerHTML + def
This sentence in your code will replace all innerHTML
each time with one line, not append.
Upvotes: 0