Question

<div id="bottom_right" style="display:none;">
    <input type="text" name="mytext" id="mytext" onclick="myFn('mytext')">
</div>

function myFn(id){
    document.getElementById(id).value = 'hello';
}

function showForm() {
    document.getElementById("bottom_right").style.display = 'block';
}

function showRoom() {
    clearRoommates();
    var root = document.getElementById("bottom_left");
    root.innerHTML="";
var inputRadio = "<h3>Select a room from below</h3><br/>";
    inputRadio += "<div id = 'left'><label><input name='rad' type='radio'>510</label><label><input name='rad' type='radio'>520</label>";
    inputRadio += "<label><input name='rad' type='radio'>530</label><label><input name='rad' type='radio'>540</label></div>";
    inputRadio += "<div id = 'right'><label><input name='rad' type='radio'>550</label><label><input name='rad' type='radio'>560</label>";
    inputRadio += "<label><input name='rad' type='radio'>570</label><label><input name='rad' type='radio'>580</label></div>";
    root.innerHTML=inputRadio;
    var element = document.getElementsByTagName("input");
    for (var i=element.length-1; i>=0; i--) {
        element[i].setAttribute('onclick',"showForm()");
    }
}

其他地方还有其他代码可将显示样式从“none”更改为“block”。当用户单击输入框时，它应自动显示文本“hello”。如果我从div中删除样式或最初将其设置为“阻止”，这样可以正常工作。

为什么显示样式最初为'none'时不起作用？

编辑

以包含显示更改功能

Answer 1

“请注意，'none'的显示不会创建一个不可见的框;它会创建根本没有框。”

http://www.w3.org/TR/CSS2/visuren.html

这就是你不能点击div或它的孩子（输入）的原因。

Answer 2

问题是标记中的onclick="myFn('mytext')在此循环期间被替换：

var element = document.getElementsByTagName("input");
for (var i=element.length-1; i>=0; i--) {
    element[i].setAttribute('onclick',"showForm()");
}

因此，当您点击<input>时，它只会再次调用showForm()而不是myFn('mytext')。

您可以使用<input>而不是getElementsByTagName()上的root从集合中排除document：

var element = root.getElementsByTagName("input");

然后，循环只影响root的后代而不是<input>中的所有document。

风格=“显示：无;”打破onclick

2 个答案: