querySelector不適用於由appendchild創建的元素

Question

我已經為IOT項目編寫了此代碼

JS代碼 CSS代碼 HTML代碼

 var DID = "7223187"; var RPNL = document.createElement("div"); RPNL.id = "Relays-panel"; RPNL.dataset.did = DID; RPNL.style.display = "block"; document.getElementById("Relays").appendChild(RPNL); var lable = document.createElement("label"); lable.style.position = "relative"; lable.style.left = "35%"; RPNL.appendChild(lable); var input1 = document.createElement("input"); input1.type = "hidden"; input1.name = "formName"; input1.value = "onoffswitchs"; lable.appendChild(input1); var div1 = document.createElement("div"); lable.appendChild(div1); var div2 = document.createElement("div"); div2.style.marginTop = "-7px"; div2.style.width = "Auto"; div2.style.cssFloat = "left"; div2.style.color = "white"; div2.style.marginLeft = "-28%"; div2.style.paddingRight = "30%"; div1.appendChild(div2); var div21 = document.createElement("div"); div21.className = "tab"; div2.appendChild(div21); var but1 = document.createElement("button"); but1.className = "tablinks"; but1.style.borderBottom = "7px solid red"; but1.dataset.rn = "3"; but1.dataset.idtag = DID; but1.onclick = function() { openRelay(this) }; but1.innerHTML = "scnd3"; div21.appendChild(but1); var but2 = document.createElement("button"); but2.className = "tablinks"; but2.style.borderBottom = "7px solid red"; but2.dataset.rn = "2"; but2.dataset.idtag = DID; but2.onclick = function() { openRelay(this) }; but2.innerHTML = "scnd2"; div21.appendChild(but2); var but3 = document.createElement("button"); but3.className = "tablinks"; but3.style.borderBottom = "7px solid red"; but3.dataset.rn = "1"; but3.dataset.idtag = DID; but3.onclick = function() { openRelay(this) }; but3.innerHTML = "scnd1"; div21.appendChild(but3); var div22 = document.createElement("div"); div22.id = "R1d"; div22.dataset.Tag = "Rtab1"; div22.className = "tabcontent"; div22.style.display = "none"; div2.appendChild(div22); var div221 = document.createElement("div"); div221.className = "onoffswitch"; div22.appendChild(div221); var switch1 = document.createElement("input"); switch1.type = "checkbox"; switch1.className = "onoffswitch-checkbox"; switch1.id = "R1"; switch1.dataset.drn = "1"; switch1.dataset.idtag = DID; switch1.onchange = function() { Butscan2(this) }; switch1.checked = false; div221.appendChild(switch1); var lable221 = document.createElement("label"); lable221.className = "onoffswitch-label"; lable221.htmlFor = "R1"; switch1.appendChild(lable221); var span2211 = document.createElement("span"); span2211.className = "onoffswitch-inner"; lable221.appendChild(span2211); var span2212 = document.createElement("span"); span2212.className = "onoffswitch-switch"; lable221.appendChild(span2212); var div23 = document.createElement("div"); div23.id = "R2d"; div23.dataset.Tag = "Rtab2"; div23.className = "tabcontent"; div23.style.display = "none"; div2.appendChild(div23); var div231 = document.createElement("div"); div231.className = "onoffswitch"; div23.appendChild(div231); var switch2 = document.createElement("input"); switch2.type = "checkbox"; switch2.className = "onoffswitch-checkbox"; switch2.id = "R2"; switch2.dataset.drn = "2"; switch2.dataset.idtag = DID; switch2.onchange = function() { Butscan2(this) }; switch2.checked = false; div231.appendChild(switch2); var lable222 = document.createElement("label"); lable222.className = "onoffswitch-label"; lable222.htmlFor = "R2"; switch2.appendChild(lable222); var span2221 = document.createElement("span"); span2221.className = "onoffswitch-inner"; lable222.appendChild(span2221); var span2222 = document.createElement("span"); span2222.className = "onoffswitch-switch"; lable222.appendChild(span2222); var div24 = document.createElement("div"); div24.id = "R3d"; div24.dataset.Tag = "Rtab3"; div24.className = "tabcontent"; div24.style.display = "none"; div2.appendChild(div24); var div241 = document.createElement("div"); div241.className = "onoffswitch"; div24.appendChild(div241); var switch3 = document.createElement("input"); switch3.type = "checkbox"; switch3.className = "onoffswitch-checkbox"; switch3.id = "R3"; switch3.dataset.drn = "3"; switch3.dataset.idtag = DID; switch3.onchange = function() { Butscan2(this) }; switch3.checked = false; div241.appendChild(switch3); var lable223 = document.createElement("label"); lable223.className = "onoffswitch-label"; lable223.htmlFor = "R3"; switch3.appendChild(lable223); var span2231 = document.createElement("span"); span2231.className = "onoffswitch-inner"; lable223.appendChild(span2231); var span2232 = document.createElement("span"); span2232.className = "onoffswitch-switch"; lable223.appendChild(span2232); var table1 = document.createElement("table"); table1.style.width = "Auto"; table1.style.cssFloat = "right"; table1.style.marginRight = "-28%"; table1.style.color = "white"; div1.appendChild(table1); var tbody1 = document.createElement("tbody"); table1.appendChild(tbody1); var tr1 = document.createElement("tr"); tbody1.appendChild(tr1); var table2 = document.createElement("table"); table2.style.width = "Auto"; table2.style.color = "white"; lable.appendChild(table2); var tr21 = document.createElement("tr"); table2.appendChild(tr21); var form21 = document.createElement("form"); tr21.appendChild(form21); var th21 = document.createElement("th"); th21.style.position = "relative"; th21.style.right = "39px"; th21.style.paddingRight = "89px"; form21.appendChild(th21); var h21 = document.createElement("h"); h21.innerHTML = "Time disabled:"; th21.appendChild(h21); var radio1 = document.createElement("input"); radio1.type = "radio"; radio1.name = "R1Tset"; radio1.dataset.tag = "OFFradio"; radio1.dataset.idtag = DID; radio1.onclick = function() { showRtimer(this.dataset.idtag, 0) }; radio1.checked = true; th21.appendChild(radio1); var br1 = document.createElement("br"); th21.appendChild(br1); var h22 = document.createElement("h"); h22.innerHTML = "Timer:"; th21.appendChild(h22); var radio2 = document.createElement("input"); radio2.type = "radio"; radio2.name = "R1Tset"; radio2.dataset.tag = "OFFradio"; radio2.dataset.idtag = DID; radio2.onclick = function() { showRtimer(this.dataset.idtag, 1) }; radio2.checked = false; th21.appendChild(radio2); var h23 = document.createElement("h"); h23.innerHTML = "Auto Time:"; th21.appendChild(h23); var radio3 = document.createElement("input"); radio3.type = "radio"; radio3.name = "R1Tset"; radio3.dataset.tag = "OFFradio"; radio3.dataset.idtag = DID; radio3.onclick = function() { showRtimer(this.dataset.idtag, 2) }; radio3.checked = false; th21.appendChild(radio3); var div3 = document.createElement("div"); div3.id = "Timer-Setting"; div3.dataset.Tag = "countdown"; div3.style.position = "relative"; div3.style.right = "100px"; div3.style.display = "none"; lable.appendChild(div3); var h31 = document.createElement("h"); h31.innerHTML = "Time Set :"; div3.appendChild(h31); var br2 = document.createElement("br"); div3.appendChild(br2); var h32 = document.createElement("h"); h32.innerHTML = "H :"; div3.appendChild(h32); var radio4 = document.createElement("input"); radio4.type = "number"; radio4.name = "hour"; radio4.value = '0'; radio4.min = '0'; radio4.max = '24'; radio4.style.width = "30px"; div3.appendChild(radio4); var h33 = document.createElement("h"); h33.innerHTML = "M :"; div3.appendChild(h33); var radio5 = document.createElement("input"); radio5.type = "number"; radio5.name = "minute"; radio5.value = '0'; radio5.min = '0'; radio5.max = '59'; radio5.style.width = "30px"; div3.appendChild(radio5); var h34 = document.createElement("h"); h34.innerHTML = "S :"; div3.appendChild(h34); var radio6 = document.createElement("input"); radio6.type = "number"; radio6.name = "second"; radio6.value = '30'; radio6.min = '0'; radio6.max = '59'; radio6.style.width = "30px"; div3.appendChild(radio6); var div4 = document.createElement("div"); div4.id = "Time-Setting"; div4.dataset.Tag = "ATime"; div4.style.position = "relative"; div4.style.right = "100px"; div4.style.display = "none"; lable.appendChild(div4); var h41 = document.createElement("h"); h41.innerHTML = "ON &nbsp;&nbsp;time Setting :"; div4.appendChild(h41); var radio7 = document.createElement("input"); radio7.type = "time"; div4.appendChild(radio7); var br3 = document.createElement("br"); div4.appendChild(br3); var h42 = document.createElement("h"); h42.innerHTML = "OFF time Setting : "; div4.appendChild(h42); var radio8 = document.createElement("input"); radio8.type = "time"; div4.appendChild(radio8); function showRtimer(Didm, timeMode) { var va = document.querySelector('[data-did="' + Didm + '"]'); if (timeMode == 0) { va.querySelector('[data-Tag="ATime"]').style.display = "none"; va.querySelector('[data-Tag="countdown"]').style.display = "none"; } else if (timeMode == 1) { va.querySelector('[data-Tag="ATime"]').style.display = "none"; va.querySelector('[data-Tag="countdown"]').style.display = "block"; } else if (timeMode == 2) { va.querySelector('[data-Tag="ATime"]').style.display = "block"; va.querySelector('[data-Tag="countdown"]').style.display = "none"; } } function openRelay(evt) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } var va = document.querySelector('[data-did="' + evt.dataset.idtag + '"]'); var val = va.querySelector('[data-Tag="Rtab' + evt.dataset.rn + '"]'); val.style.display = "block"; evt.className += " active"; } 

  /* Setting background color green */ body { background-color: #008060; } /* all links on mouse hover have a golden reaction */ #links { text-decoration: none; color: #305030; } #links:hover { color: gold; } /* Relay Number Tabs (in Farsi relay 1 , Relay 2 , ... ) general settings */ .tab { overflow: hidden; border-bottom: 1px solid #ccc; } /* Style the buttons inside the tab */ .tab button { background-color: inherit; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 22px; color: floralwhite; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #00bf4442; } /* Create an active/current tablink class */ .tab button.active { background-color: #ad2626; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; -webkit-animation: fadeEffect 1s; animation: fadeEffect 1s; } /* Fade in tabs */ @-webkit-keyframes fadeEffect { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeEffect { from { opacity: 0; } to { opacity: 1; } } /* Circle pushButtons (like setting buttons) CSS */ .pushButton { position: relative; width: 60px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .pushButton-checkbox { display: none; } .pushButton-label { display: block; overflow: hidden; cursor: pointer; width: 60px; height: 60px; background-color: #A8EDC4; border: 3px solid silver; border-radius: 100%; } .pushButton-inner { display: block; width: 200%; //margin-left: -100%;} .pushButton-inner { display: block; float: left; width: 100%; height: 100%; font-size: 15px; position: relative; top: 17px; left: 4px; color: #004400; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; box-sizing: border-box; } .Window { position: relative; top: 70px; left: 30px; background-color: #00AA88; width: 350px; border: 10px solid #006633; border-radius: 40px; } .setting-forms { position: relative; top: 5px; left: 15px; width: 90%; border-top: 3px solid silver; border-bottom: 3px solid silver; } #keys { width: 60px; height: 60px; background-color: olive; border: 3px solid silver; border-radius: 100%; position: absolute; top: 90px; } #keys-inner { position: relative; top: 17px; left: 7px; color: silver; } #Relays-panel, #Temp_attach, #PIR_attach { position: relative; align: center; background-color: #204020; color: white; width: 320px; border-radius: 10px; border: 5px solid white; } { margin-bottom: 10px; padding: 10%; position: relative; float: right; background-color: #204020; color: white; width: 320px; border-radius: 10px; border: 5px solid white; } #Relays { position: absolute; top: 200px; width: 50%; right: 1%; } #sensor_settings { position: absolute; top: 200px; width: 50%; } #temp_temp, #temp_tolerance { width: 90%; } /* Relay ON - OFF Slider switchs CSS */ .onoffswitch { right: 27%; position: relative; width: 90px; float: right; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .onoffswitch-checkbox { display: none; } .onoffswitch-label { display: block; overflow: hidden; cursor: pointer; border: 2px solid #7A7A7A; border-radius: 50px; } .onoffswitch-inner { display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s; } .onoffswitch-inner:before, .onoffswitch-inner:after { display: block; float: left; width: 50%; height: 40px; padding: 0; line-height: 40px; font-size: 20px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; box-sizing: border-box; } .onoffswitch-inner:before { content: "ON"; padding-left: 5px; background-color: #A8EDC4; color: #139402; text-align: left; } .onoffswitch-inner:after { content: "OFF"; padding-right: 5px; background-color: #F0AAB5; color: #AD2626; text-align: right; } .onoffswitch-switch { display: block; width: 28px; margin: 6px; background: #AD2626; position: absolute; top: 0; bottom: 0; right: 46px; border: 2px solid #7A7A7A; border-radius: 50px; transition: all 0.3s ease-in 0s; } .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner { margin-left: 0; } .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch { right: 0px; background-color: #139402; } 

 <div id='Relays'> <div id='Relays-panel' data-did='7223184' style="display: block;"> <!--form method='POST' style='position:relative;left:35%;'--> <label style='position:relative;left:35%;'> <input type='hidden' name='formName' value='onoffswitchs'> <div> <div style="margin-top: -7px; width:Auto; float: left; color:white; margin-left: -28%;padding-right: 30%;"> <div class="tab" > <button class="tablinks" style="border-bottom: 7px solid red;" data-rn='3' data-idtag="7223184" onclick="openRelay(this)">FST3</button> <button class="tablinks" style="border-bottom: 7px solid red;" data-rn='2' data-idtag="7223184" onclick="openRelay(this)">FST2</button> <button class="tablinks" checked style="border-bottom: 7px solid red;" data-rn='1' data-idtag="7223184" onclick="openRelay(this)">FST1</button> </div> <div id="R1d" data-Tag= "Rtab1" class="tabcontent" style="display: none;"> <div class="onoffswitch"> <input type="checkbox" class="onoffswitch-checkbox" id="R1" data-drn='1' data-idtag="7223184" onchange="Butscan2(this)" unchecked=""> <label class="onoffswitch-label" for="R1"> <span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span> </label></input> </div> </div> <div id="R2d" data-Tag="Rtab2" class="tabcontent" style="display: none;"> <div class="onoffswitch"> <input type="checkbox" class="onoffswitch-checkbox" id="R2" data-drn='2' data-idtag="7223184" onchange="Butscan2(this)" unchecked=""> <label class="onoffswitch-label" for="R2"> <span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span> </label></input> </div> </div> <div id="R3d" data-Tag="Rtab3" class="tabcontent" style="display: none;"> <div class="onoffswitch"> <input type="checkbox" class="onoffswitch-checkbox" id="R3" data-drn='3' data-idtag="7223184" onchange="Butscan2(this)" unchecked=""></input> <label class="onoffswitch-label" for="R3"> <span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span> </label> </div> </div> </div> <table style="width:Auto;float: right;margin-right: 55%; color:white"> <tbody> <tr> </tr> </tbody> </table> </div> <table style="width:Auto; color:white"> <tr> <th> <div class="led-box" style='display:none;'> <div class="led-green" id="R1LED" data-Tag="LED"></div> </div> </th> <tr> <form> <th style='position:relative;right: 39px; padding-right: 89px;'> Time disabled:<input type='radio' name='R1Tset' data-Tag='OFFradio' data-idtag="7223184" onclick='showRtimer(this.dataset.idtag,0)' checked> <br/> Timer: <input type='radio' name='R1Tset' data-Tag='Ctimeradio' data-idtag="7223184" onclick='showRtimer(this.dataset.idtag,1)'> Auto Time: <input type='radio' name='R1Tset' data-Tag='ATimeradio' data-idtag="7223184" onclick='showRtimer(this.dataset.idtag,2)'> </th> </form> </tr> </table> <div id='Timer-Setting' data-Tag="countdown" style='position:relative;right:100px;display:none;'> Time Set :<br/> H :<input type="number" name="hour" value='0' min="0" max="24" style='width=30px;'> M : <input type="number" name="minute" value='0' min="0" max="59" style='width=30px;'> S : <input type="number" name="second" value='30' min="0" max="59" style='width=30px;'> </div> <div id='Time-Setting' data-Tag="ATime" style='position:relative;right:100px;display:none;'> ON &nbsp;&nbsp;time Setting : <input type='time'> <br/> OFF time Setting : <input type='time'> </div> </label> </div> </div> 

這兩個塊是不同的 ，

第一個是由html制作的

第二個是用javascript制作的 ！

一切工作正常，但函數中的Queryselector找不到元素，並且由於該代碼不能正常工作:(

例如我有這個功能：

首先隱藏所有打開的標簽

第二個顯示我們要顯示的標簽！

function openRelay(evt) 
  {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");

    for (i = 0; i < tabcontent.length; i++) 
    {
      tabcontent[i].style.display = "none";
    }

    tablinks = document.getElementsByClassName("tablinks");

    for (i = 0; i < tablinks.length; i++) 
    {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    var va  = document.querySelector('[data-did="'+evt.dataset.idtag+'"]');
    var val  = va.querySelector('[data-Tag="Rtab'+evt.dataset.rn+'"]');
    val.style.display = "block";
    evt.className += " active";
  }

我能做什么 ？

Answer 1

這里的問題是當您使用帶有數據集的大寫字母以及如何創建屬性時會發生什么。

 var d = document.createElement("div") d.dataset.Bar = "hello" document.getElementById("out").appendChild(d) console.log(document.getElementById("out").innerHTML) 

 <div id="out"></div> 

Bar的屬性是data--bar而不是data-Bar