Question

我想在span“sliderInput”中显示滑块的值。

但我得到的错误无法设置NULL的属性'innerHTML'。

警报发生但是在onchange处理程序中所有三个语句都失败了。

Html代码：---

<!DOCTYPE html>
<html style="height: 100%;">
<head>
  <script type="text/javascript" src="tt.js"></script>
</head>

<body onload="doc_onload()">

<p>This example calls a function which performs a calculation, and returns the result:</p>

<p id="demo"></p>

            <input id="HeaterSlider" class="img_slider_center" type="range" min="1" max="10" step="1" value="0"  list=volsettings>
            <datalist id=volsettings>
            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
            </datalist>
            <span type="text" id="sliderInputTxt" style=" color:#DDDFED">Heater Value : </span>
            <span type="text" id="sliderInput" style=" color:#DDDFED">0</span>


</body>
</html>

javascript： -

function vscpws_slider(     sliderCanvasName,    // Where it should be placed
                            slideTxtname
                               )
{

    this.sliderCanvas = document.getElementById(sliderCanvasName);
    this.sliderTxtcanvas = document.getElementById(slideTxtname);


    this.sliderTxtcanvasId = slideTxtname;
    this.sliderCanvas.onchange = this.updateSlider.bind(this);

}


vscpws_slider.prototype.updateSlider = function()
{
            alert("hell0");

            //this.slidertxtCanvas.innerHTML = this.sliderCanvas.value;
            //document.getElementById(this.sliderTxtCanvasId).textContent = this.sliderCanvas.value;
            document.getElementById(this.sliderTxtCanvasId).innerHTML = this.sliderCanvas.value;
}


function doc_onload()
{
    var btn = new vscpws_slider('HeaterSlider',
                                'sliderInput');
}

Answer 1

正如 putvande 所说，javascript区分大小写，因此您应该使用this.sliderTxtcanvasId，而不是this.sliderTxtCanvasId

vscpws_slider.prototype.updateSlider = function(){
    document.getElementById(this.sliderTxtcanvasId).innerHTML = this.sliderCanvas.value;
//--shouldn't be capital C but small------^
}

DEMO

更改事件的html滑块 - 错误

1 个答案: