Question

我已经为An编写了此代码物联网项目

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

querySelector不适用于由appendchild创建的元素

1 个答案: