Clown
Clown

Reputation: 5

A variable returns multiple strings when console.log() but not when used .innerHTML in javascript

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

Answers (2)

Krutik Raut
Krutik Raut

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

lei li
lei li

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

Related Questions