JavaScript Basics

querySelectorAll.

<!DOCTYPE>
<html>
<head></head>
<body>
<div class="javascript_css"></div>
<script>
function functionName0() {
  
  if (document.getElementById("div0") == null) {       
    var divElement = document.createElement("div");    divElement.setAttribute("id", "div0");
    divElement.setAttribute("class", "div_simple");   
    divElement.setAttribute("onclick", "processEvent_click()");
    divElement.style.position = "absolute";
    divElement.style.top = "60px";
    divElement.style.left = "0px";
    divElement.style.width = "300px";
    divElement.style.height = "100px";
    divElement.style.backgroundColor = "lightgray";
    divElement.style.borderRadius = "2px";
    divElement.style.border = "4px solid lightgray";
    divElement.style.overflow = "scroll";
    document.getElementsByClassName("javascript_css")[0].appendChild(divElement);
  }

}
  
  
function processEvent_click() { 
  const out = document.querySelectorAll(".div_simple");
  document.getElementById("div0").innerHTML += "out: "+out+"<br>";
  document.getElementById("div0").innerHTML += "out.length: "+out.length+"<br>";  
  
  for (var i=0; i<out.length; i++) { 
    document.getElementById("div0").innerHTML += "width: "+out[i].style.width+"<br>";   
    document.getElementById("div0").innerHTML += "height: "+out[i].style.height+"<br>";
    document.getElementById("div0").innerHTML += "border: "+out[i].style.border+"<br>";
    document.getElementById("div0").innerHTML += "borderRadius: "+out[i].style.borderRadius+"<br>";
    document.getElementById("div0").innerHTML += "backgroundColor: "+out[i].style.backgroundColor+"<br>";
  }

}
</script>
<script>
topbar();
  
function topbar() { 
  document.getElementsByClassName("javascript_css")[0].style.position = "absolute";
  document.getElementsByClassName("javascript_css")[0].style.width = "300px";
  document.getElementsByClassName("javascript_css")[0].style.height = "50px";
  document.getElementsByClassName("javascript_css")[0].style.border = "1px solid gray";
  document.getElementsByClassName("javascript_css")[0].style.borderRadius = "2px";
  document.getElementsByClassName("javascript_css")[0].innerHTML = "querySelectorAll. Click box to view results.";
  
  functionName0();
  
 }
 </script>
</body>
</html>

Good Luck with your workflows and Happy Practicing! 👋

Get Practicing DatScy’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

🔔 Practicing Datscy @ Medium | 🌷 Practicing Datscy @ Dev.to