innerHTML赢得't改变元素

innerHTML won't change element

本文关键字：改变 元素 赢得 innerHTML      更新时间：2023-09-26

我的页面上有一个div元素（"main"），它的内容在两个不同的屏幕之间来回变化（它们的id是"readout"answers"num"），其内容存储为隐藏的div元素（使用display:none）。每个屏幕都有一个按钮，用于将main设置为另一个隐藏分区。

由于我很难用javascript将num.innerHTML加载到main中，我最终将与num几乎相同的内容（具有不同的表单名称）放入了main：

<p>Number of Passengers per Carriage:</p>
<form method="post" action="javascript:void(0);" name="applesForm" onSubmit="setPassengers();">
<input type="text" name="numApples" id="numPassengers" />
<br/><br/>
<input type="submit" name="Submit" value="OK!"/>
</form>

setPassengers()成功地将main的内容设置为readout。readout成功地将main的内容设置为num（实际上与main的原始内容相同）。但它不会回到读数。

这里是setPassengers()和setPassengersAgain()，它们是相同的，但用于不同的表单名称：

function setPassengers()
    {
            passengers=document.applesForm.numPassengers.value;
            document.getElementById('main').innerHTML=readout.innerHTML;
        }
        function setPassengersAgain()
        {
            passengers=document.applesFormAgain.numPassengers.value;
            document.getElementById('main').innerHTML=readout.innerHTML;
        }

所以我的问题是：1） 为什么num没有变为readout？2） 有没有一种方法可以在页面加载时直接加载num，从而简化代码？

编辑：我可以使用onload，这意味着num是唯一坏掉的比特。。。

编辑2：以下是隐藏的div：

<div id="readout" style="display:none">
<p>Throughput per hour:</p>
<p id="output">--</p>
<p>Average Dispatch Time:</p>
<p id="avDisTime">--</p>
<form method="post" action="javascript:void(0);" name="dispatchForm" onSubmit="dispatch();i++;">
<input type="submit" name="Submit" value="Press on Dispatch!"/>
</form>
<br/>
<form method="post" action="javascript:void(0);" name="resetTimesForm" onSubmit="resetTimes();">
<input type="submit" name="Submit" value="Reset Times"/>
</form>
<form method="post" action="javascript:void(0);" name="resetAllForm" onSubmit="resetAll();">
<input type="submit" name="Submit" value="Reset All"/>
</form>
</div>
<!--back to default page-->
<div id="num" style="display:none">
<p>Number of Passengers per Carriage:</p>
<form method="post" action="javascript:void(0);" name="applesFormAgain" onSubmit="setPassengersAgain();">
<input type="text" name="numApples" id="numPassengers" />
<br/><br/>
<input type="submit" name="Submit" value="OK!"/>
</form>
</div>

您没有发布HTML代码，所以我不知道它看起来怎么样，但您可以使用以下内容：

HTML:

<button id="changeMain">Change #main</button>
<div id="main">
    <div id="readout" class="screen show">
        Readout
    </div>
    <div id="num" class="screen">
        Num
    </div>
</div>

CSS：

#main>.screen{display:none;}
#main>.screen.show{display:block;}

JavaScript:

var els=[document.getElementById('readout'),document.getElementById('num')],current;
function addClass(el,c){
    var arr=el.className.split(' ');
    if(arr.indexOf(c)>-1){return;}
    arr.push(c);
    el.className=arr.join(' ');
}
function delClass(el,c){
    var arr=el.className.split(' ');
    var i=arr.indexOf(c);
    if(i===-1){return;}
    arr.splice(i,1);
    el.className=arr.join(' ');
}
document.getElementById('changeMain').onclick=function(){
    if(!current){
        for(var i=0,l=els.length;i<l;i++){
            if(els[i].className.indexOf('show')>-1){
                current=i;
                break;
            }
        }
    }
    delClass(els[current],'show');
    current=(current+1)%els.length;
    addClass(els[current],'show');
}

演示：http://jsfiddle.net/CUgqh/

解释：

如果你想要#main中的一些内容，你应该放在里面（隐藏或显示）。然后，我们用#main>.screen{display:none;}隐藏除.screen.show:#main>.screen.show{display:block;}之外的所有.screen。

然后，JavaScript代码：

首先，我们创建一个包含以下元素的数组：

var els=[document.getElementById('readout'),document.getElementById('num')],current;

以及向元素CCD_ 28添加/移除类CCD_ 27的函数：

function addClass(el,c){
    var arr=el.className.split(' ');
    if(arr.indexOf(c)>-1){return;}
    arr.push(c);
    el.className=arr.join(' ');
}
function delClass(el,c){
    var arr=el.className.split(' ');
    var i=arr.indexOf(c);
    if(i===-1){return;}
    arr.splice(i,1);
    el.className=arr.join(' ');
}

我们为按钮创建一个事件：

document.getElementById('changeMain').onclick=function(){
    if(!current){
        for(var i=0,l=els.length;i<l;i++){
            if(els[i].className.indexOf('show')>-1){
                current=i;
                break;
            }
        }
    }
    delClass(els[current],'show');
    current=(current+1)%els.length;
    addClass(els[current],'show');
}

上面的代码做：

  • 如果这是第一次未定义当前els'索引（current），我们将搜索默认情况下哪个元素具有类show
  • 它将类show移除到当前显示的元素，因此它将消失
  • 它将1添加到current（或者，如果它是最后一个els'元素，它将变为0
  • 它将类show添加到当前元素中，因此它出现了
相关文章：