Question

我几周前开始学习JavaScript，但我遇到了问题。我有两个功能，用于在单击按钮时显示菜单。理论上，弹出的菜单应该从左侧调出一个小的div元素，并在该div元素中调出6个div元素。主div元素有id“pokemonswitch”，当我点击带有相关功能的按钮时，它只会调出“pokemonswitch”，其他div元素似乎不想出现在“pokemonswitch”中。我修改了代码并获得了各种结果。

1：Div元素出现在“pokemonswitch中，但是在我点击了另一个删除了”pokemonwitch“的按钮之后，尽管父元素不存在，div元素仍保留在那里。

2：div元素在“pokemonswitch”中根本不出现。

3：div元素出现在随机位置，其余功能不起作用。

我的目标是让一个函数调用“pokemonswitch”，里面有六个div元素。是否有一些我错过的结构导致我的孩子div元素如此疯狂？我希望这很清楚，如果没有，我会非常乐意在这个问题上附上更多细节。

//MAKE DIV ELEMENT pokemonswitch VISIBLE AND ASSOCIATIVE SLOTS AS WELL
 function pkmnFunction() {
     var element = document.getElementById('pokemonswitch');
     var cancel = document.getElementById('optionsdiv');


     element.style.visibility = "visible";
     document.getElementById('slot1').style.visibility = "visible";
     document.getElementById('slot2').style.visibility = "visible";
     document.getElementById('slot3').style.visibility = "visible";
     document.getElementById('slot4').style.visibility = "visible";
     document.getElementById('slot5').style.visibility = "visible";
     document.getElementById('slot6').style.visibility = "visible";
     cancel.innerHTML = "<input id='cancelbutton' type='button' value='cancel' onclick='canFunction()' style='position:absolute; top:95px; left:35px;'></input>";
     element.innerHTML = "<div id='slot1'></div><div id='slot2'></div><div id='slot3'></div><div id='slot4'></div><div id='slot5'></div><div id='slot6'></div>";
 }

 //MAKE DIV ELEMENT pokemonswitch HIDDEN AND ASSOCIATED slot ELEMENTS AS WELL               
 function canFunction() {
     var element = document.getElementById('pokemonswitch');
     var cancel = document.getElementById('optionsdiv');



     document.getElementById('slot1').style.visibility = "hidden";
     document.getElementById('slot2').style.visibility = "hidden";
     document.getElementById('slot3').style.visibility = "hidden";
     document.getElementById('slot4').style.visibility = "hidden";
     document.getElementById('slot5').style.visibility = "hidden";
     document.getElementById('slot6').style.visibility = "hidden";
     element.style.visibility = "hidden"

     cancel.innerHTML = "<input id='b5' type='button' onclick='setSlots()' value='Check Slot' ></input><input id='b1' type='button' value='Fight!'></input><input id='b2' type='button' onclick='pkmnFunction()' value='Pkmn'></input><input id='b3' type='button' value='Items' onclick='itemFunction()'></input><input id='b4' type='button' value='Run'></input>";

 }

 ////////////ASSOCIATED CSS STYLE CODE//////////////////

 #pokemonswitch {
     position: absolute;
     width: 180px;
     margin - left: -15px;
     height: 100 % ;
     border: solid;
     border - color: black;
     border - width: 2px;
     border - radius: 25px;
     background - color: 0099CC;
     z - index: 3;
     visibility: hidden;
 }

 #slot1 {
     position: absolute;
     top: 0px;
     left: -10px;
     padding: 5px;
     text - align: center;
     border: solid;
     border - width: 1px;
     background - color: red;
     width: 170px;
     height: 65px;
     z - index: 4;

 }


 #slot2 {
     position: absolute;
     top: 65px;
     left: -10px;
     padding: 5px;
     text - align: center;
     border: solid;
     border - width: 1px;
     background - color: red;
     width: 170px;
     height: 65px;
     z - index: 4;
     visibility: hidden;
 }


 #slot3 {
     position: absolute;
     top: 130px;
     left: -500px;
     padding: 5px;
     text - align: center;
     border: solid;
     border - width: 1px;
     background - color: red;
     width: 170px;
     height: 65px;
     z - index: 4;
     visibility: hidden;
 }


 #slot4 {
     position: absolute;
     top: 195px;
     left: -500px;
     padding: 5px;
     text - align: center;
     border: solid;
     border - width: 1px;
     background - color: red;
     width: 170px;
     height: 65px;
     z - index: 4;
     visibility: hidden;
 }


 #slot5 {
     position: absolute;
     top: 260px;
     left: -500px;
     padding: 5px;
     text - align: center;
     border: solid;
     border - width: 1px;
     background - color: red;
     width: 170px;
     height: 65px;
     z - index: 4;
     visibility: hidden;
 }

 #slot6 {
     position: absolute;
     top: 325px;
     left: -250px;
     padding: 5px;
     text - align: center;
     border: solid;
     border - width: 1px;
     background - color: red;
     width: 170px;
     height: 65px;
     z - index: 4;
     visibility: hidden;
 }

Answer 1

document.getElementById('slot1').style.visibility = "visible";
element.innerHTML = "<div id='slot1'></div>";

这是不对的。第一行表明已存在标识为slot的元素。第二行添加一个具有相同id的新div。

如果该元素应该已存在，则可以添加现有元素

var slot1 = document.getElementById('slot1');
slot1.style.visibility = "visible";
element.appendChild(slot);

如果没有，您可以先创建它：

var slot1 = document.createElement('div');
slot1.id = 'slot1';
slot1.style.visibility = "visible";
element.appendChild(slot);

Answer 2

我是这样做的！创建一个包含所需表单的div，并将此div显示为：none。然后单击使其显示在您想要的位置

<div style="display:none">
<div id="mycontent">
content content
</div>
</div>

然后使用的document.getElementById（ 'ID'）..的style.display = “值”

Answer 3

问题是，您正在尝试引用尚未创建的元素。

element.innerHTML = "<div id='slot1'></div><div id='slot2'></div><div id='slot3'></div><div id='slot4'></div><div id='slot5'></div><div id='slot6'></div>";//Place this first
document.getElementById('slot1').style.visibility = "visible";
document.getElementById('slot2').style.visibility = "visible";
document.getElementById('slot3').style.visibility = "visible";
document.getElementById('slot4').style.visibility = "visible";
document.getElementById('slot5').style.visibility = "visible";
document.getElementById('slot6').style.visibility = "visible";
cancel.innerHTML = "<input id='cancelbutton' type='button' value='cancel' onclick='canFunction()' style='position:absolute; top:95px; left:35px;'></input>";

我注意到的其他一些事情也是：

而不是使用style.visibility使用style.display。 <input>不是容器元素，因此请随处删除</input>。

子函数没有出现在由父函数创建的父div元素中

3 个答案: