Search code examples
javascripthtmldomappendchildselectors-api

querySelector doesn't work for elements that created by appendchild

i have written this code for An IOT project

JS code CSS code HTML code

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   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>

these two blocks are diffrent ,

first one is made by html

Second one is made with javascript!

everything works fine except that Queryselector in functions doesn't find elements and because of that code doent work properly :(

for example i have this function that :

first hide every open tabs

second show the tab we want to show!

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";
  }

what can i do ?

Solution

  • The problem here is what happens when you use a capital letter with data set and how the attributes is created.

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

    The attribute for Bar is data--bar not data-Bar