.innerHTML edits HTML but doesnt display

user_11892949 0
Viewed 46

so I have a bit of code that generates a few spans for display of a few range inputs but when the span is edited it shows as if it were edited in the console but not the page

for (var i = 0; i < 5; i++) {
            text = document.createElement('span')
            span[pos][i] = text;
            console.log(text)
            div.innerHTML += list[i]
            text.setAttribute("id",`${pos}0${i}`)
            div.appendChild(text);
            div.appendChild(space);
        }
        div.appendChild(document.createElement('p'))
        for (var i = 0; i < 5; i++) {
            space = document.createElement('span')
            space.setAttribute("style","padding-left: 40px")
            slider = document.createElement('input')
            range[pos][i] = slider;
            slider.setAttribute("type","range")
            slider.setAttribute("id",`${pos}1${i}`)
            div.appendChild(slider);
            div.appendChild(space);
            console.log(div, i)
        }
for (var i = range.length - 1; i >= 0; i--) {
                for (var j=0; j<5; j++) {
                    span[i][j].innerHTML = range[i][j].value;
                    //console.log(j)
                }
        }
innerhtml html javascript
1 Answers

I don't understand what you are going to do with the 5 sliders?

var range = [];
var span = [];
function init() {
var div = document.createElement('div');
for (var i = 0; i < 5; i++) {
            var text = document.createElement('span');
            span[i] = text;
            console.log(text);
            //div.innerHTML += list[i]
            text.setAttribute("id",`txt0${i}`);
            div.appendChild(text);
            var space = document.createElement('span');
            div.appendChild(space);
        }
        div.appendChild(document.createElement('p'))
        for (var i = 0; i < 5; i++) {
            var space = document.createElement('span');
            space.setAttribute("style","padding-left: 40px");
            var slider = document.createElement('input');
            range[i] = slider;
            slider.setAttribute("type","range");
            slider.setAttribute("id",`slider1${i}`);
            div.appendChild(slider);
            div.appendChild(space);
            console.log(div, i)
        }
for (var i = range.length - 1; i >= 0; i--) {
                for (var j=0; j<5; j++) {
                    span[i].innerHTML = range[i].value;
                    //console.log(j);
                }
        }
        document.body.appendChild(div);
}
<body onload="init()">
</body>

user_59540580
Related