Title: Javascript returns [object HTML Span element]
Tags: javascript;html
Question: enter image description heredrag.php
I have array shuffled with shuffled words and when I try to set textContent of box to word it show this
<script&gt;
var firstContainer = document.getElementById('pickzone');
var sentense =<?php echo &quot;'$array'&quot; ?&gt;; //getting string of sentense
var arrOfWords = sentense.split(&quot; &quot;) // spliting it into array of strings(words)
var dropZones = document.getElementsByClassName('zone');
var shuffled = arrOfWords.sort(() =&gt; Math.random() - 0.5)// shuffling array of words in random order
for (let i = 0; i < arrOfWords.length; i++) {
let box = document.createElement('span');
arrOfWords[i] = box;
box.setAttribute('class', 'box');
box.setAttribute('draggable', 'true')
box.textContent = shuffled[i] // this is the problematic part I guess
box.addEventListener('dragstart', (event) =&gt; {
dragBox = event.target;
})
firstContainer.appendChild(box);
</script&gt;
Comment: Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking.

Comment: Remove the `arrOfWords[i] = box;` line. You are setting the `span` element to that index. `arrOfWords` and `shuffled` are the same arrays since `sort` modifies the original array. So, `shuffled[i]` returns the span element you set in `arrOfWords[i] = box`



{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 0, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2022:00:03/04/22', 'FavoriteCount': 1.0, 'PostTypeId': 1, 'Tags': '<javascript><html>', 'Title': 'Javascript returns [object HTML Span element]', 'ViewCount': 51, 'id': 71346677, 'user_AboutMe': None, 'user_AccountId': 20870592.0, 'user_DisplayName': 'High Tekk', 'user_Reputation': 13.0, 'user_Views': 0.0, 'user_id': 18370065.0}}