Telegram API Question posted in
A comprehensive official documentation can be found here.

JS is not working in my web page,Explained below,any solution? – Telegram API

I am working on a web project every thing was too good until i decided to add JS, to make my page dynamic but at that point i faced a big problem when i try to access my elements by tagName or by id or class it always returns null and undefined, any solution please , i am new at this ,Thanks in advance,if you are unavle to understand the question you can mail me or reply here but please i need solution

console.log('test1')
window.onload = function() {;
elements.forEach((element) => element.style.color = 'red');
}
/* * {
    margin: 0;
} */


}
body {
    margin: 0;
    box-sizing: border-box;
    display: block;
    background: #eee;
}
header {
    color: white;
    background: linear-gradient(to left, #222, black, #222);
    box-sizing: border-box;
    border-bottom: 2px solid #999;
    display: block;
    overflow: hidden;
    width: 100%;
    text-align: center;
    padding: 22px;
    padding-bottom: 20px;
}
header .page-title {
    cursor: pointer;
    display: block;
    font-size: 25px;
    font-variant: small-caps;
    transition: color 1s linear, font-size 1s linear;
}
header .page-title:hover {
    cursor: pointer;
    font-size: 25px;
    color: green;
    text-shadow: 0 0 7px #004800;
    transition: color 1s linear, font-size 1s linear, text-shadow 2s linear;
}
//not working.pagetitle:hover < header {background:black;}
.search {
    float: left;
    text-decoration: none;
    font-size: 15px;
    padding: 17.5px;
    display: inline-block;
    border: none;
    border-left: 1px solid white;
    box-sizing: border-box;
    color: white;
    background: black;
    width: 88%;
}
.icon {
    float: left;
    border-right: none;
    text-align: : left;
    box-sizing: border-box;
    background: black;
    margin: 0;
    display: inline-block;
    color: white;
    padding: 17.5px;
    font-size: 15px;
    width: 6%;
}
input:focus {
    outline: none;
}

/*input:before{
            border:1px solid black:
            content:"";
            }
            //.icon:before{
            border:1px solid black;
            content:"";
            }
            */
.contextBtn {
    //box-shadow:inset 0 0 7px white;
    border-top: 1px solid white;
    font-size: 15px;
    padding: 15px;
    display: block;
    box-sizing: border-box;
    text-align: center;
    width: 100%;
    background: black;
    color: white;
}
ul {
    list-style-type: none;
    padding: 0 0 5px 0;
    margin: 0;
    box-shadow: 0 0 3px black;
}
li {
    width: 100%;
}
li a {
    position: relative;
    color: #fff;
    //background:#333;
    background: linear-gradient(to left, black, #222, black);
    font-size: 110%;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    margin: auto;
    //padding:3%;
    padding: 20px;
    width: 100%;
    height: 6%;
    display: block;
    overflow: hidden;
    box-shadow: 0px -1px 1px white;
    transition: width 1s, border-radius 2s, padding 1.5s, background 1.5s, font-size 1s, border-left 2s, border-right 2s;
}
li a:hover:not(.active-item) {
    box-sizing: border-box;
    display: block;
    background: linear-gradient(to left, #1B1B1B, black, #1B1B1B);
    font-size: 120%;
    margin-left: auto 10%;
    width: 80%;
    height: 6%;
    overflow: hidden;
    //padding:4%;
    padding: 23px;
    border-left: 3px solid green;
    border-right: 3px solid green;
    border-radius: 25px;
    box-shadow: 0 0 3px #67FF67;
    box-shadow: inset 0 0 7px #69FF69;
    transition: width 1.5s, background 3s linear 0.2, border-radius 1s linear, font-size 0.2s linear 0.1s, margin 2s linear 5s, padding 2s, border-right 1s linear 1s, border-left 1s linear 1s, box-shadow 1s linear 2s;
    //transition:width 1.5s, background 1.5s,border-radius 1.5s;
}
li a:active {
    background-color: red;
}
li a:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    box-sizing: border-box;
    left: 50%;
    transition: width 2s linear, left 2s linear, height 0.4s linear 0.1s;
}
li a:hover:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    border: 3px solid green;
    border-left: 0px solid green;
    border-right: 0px solid green;
    border-top: 2px solid green;
    box-sizing: border-box;
    bottom: 0;
    left: 0;
    transition: width 1s linear, left 1s linear, height 0.2s linear 0.1s, box-shadow 3s linear 2s;
}
li a:after {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    box-sizing: border-box;
    right: 50%;
    transition: width 2s linear, right 2s linear, height 0.4s linear 0.1s;
}
li a:hover:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    border: 2px solid green;
    border-left: 0px solid green;
    border-right: 0px solid green;
    border-top: 1px solid green;
    box-sizing: border-box;
    bottom: 0;
    right: 0;
    transition: width 1s linear, right 1s linear, height 0.2s linear 0.1s;
}
li a.active-item {
    //position: relative;
    background: green;
    padding: 25px;
    border-radius: 30px;
    border-top: 0.5px solid #989898;
    border-bottom: 0.2px solid black;
    width: 80%;
    margin: auto;
    font-size: 22px;
    box-shadow: 0 0 5px #3F7D00;
}
li a.active-item:hover {
    border: 1px solid green;
    box-shadow: 0 0px 5px #3F7D00;
}
article {
    //position: relative;
    margin: 2px;
    padding: 20px 8px;
    box-shadow: 0px 0px 5px black;
    //font-size:20px;
}
article p {
    font-size: 15px;
}
.divider {
    text-align: center;
}
footer {
    margin: 0 2px 5px 2px;
    background: grey;
}
.foot-container {
    background: grey;
    //position: relative;
    box-sizing: border-box;
    box-shadow: 0 1px 5px black;
}
.foot-section {
    line-height: 25px;
    text-align: center;
    color: white;
    float: left;
    margin: 0.1111111111111111%;
    width: 33%;
    box-sizing: border-box;
    box-shadow: 0 0 1px black;
}

/* .foot-section:after{
                    content"";
                    display:table;
                    clear:both;
                }*/
.foot-section h4 {
    //text-decoration:underline;
    display: inline-block;
    margin: 6px auto 8px auto;
    font-size: 110%;
}
.foot-section a {
    color: white;
    text-decoration: none;
    display: block;
    clear: both;
}
.foot-section a:hover {
    font-size: 90%;
    box-shadow: inset 0 0 7px #2F2F2F;
}
address {
    text-decoration: none;
    margin: 5px auto;
    line-height: 20px;
    box-shadow: 0 0 5px black;
    text-align: center;
    color: white;
}
.social {
    width: 100%;
    display: block;
    box-sizing: border-box;
    text-align: center;
    //bottom: 0;
}
.social a {
    border: 1px solid black;
    border-radius: 8.5px;
    width: 17px;
    height: 17px;
    margin: 2px;
    padding: 3px;
    display: inline-block;
    box-shadow: 0 0 5px black;
}
.social a:hover {
    color: white;
    background: black;
}
@media only screen and (min-width: 500px) {
    body {
        background: white;
        //position: relative;
    }
    /* .contextBtn {
        display: none;
    } */
    
    li a {
        overflow-y: hidden;
        //position: sticky;
        width: 25%;
        float: left;
        top: 0;
        transition: none;
    }
    
    li a:hover:not(.active-item) {
        width: 25%;
        padding: 20px;
        z-index: 1;
        border-radius: 0%;
        font-size: initial;
        transition: none;
    }
    
    li a.active-item {
        display: none;
    }
    
    article {
        margin: 50px 5px 10px 5px;
        padding: 50px 5px;
    }
    
    .icon {
        width: 8%;
    }
    
    .search {
        width: 92%;
    }
}

/* @media only screen and (min-width:350px) {
    .contextBtn {
        display: none;
    }
    
    .search {
        width: 90%;
    }
    
    .icon {
        width: 8%;
    }
} */
<!DOCTYPE html>

<html lang="en">

<head>
    <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0 ">
    <title>About Us </title>
    <link rel="stylesheet" href="style/mystyles.css">
    <script src="https://kit.fontawesome.com/7e25e18c01.js" crossorigin="anonymous"></script>
    <!-- https: //cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.16/svg.min.js -->
    <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->

</head>

<body>
    <header>
        <h1 class="page-title">About MixHacxTricks &nbsp &nbsp
            <i class="fas fa-id-card-alt"></i></h1>
    </header>
    <nav>

        <div>
            <ul>
                <div class="search-area"><input class="search" type="search" placeholder="Search">
                    <!--<label class="icon">-->
                    <span class="icon"> <i class="fas fa-search"></i></span>
                    <!--</label>-->
                </div>
                <span class="contextBtn" id="context">  x  </span>
                <li class="menu"><a href="#" class="nav-item">Home     &nbsp <i class="fas fa-home"></i></span></a></li>
                <li class="menu"><a href="#" class="nav-item">Android  &nbsp <i class="fab fa-android"></i></span></a></li>
                <li class="menu"><a href="#" class="nav-item">Windows  &nbsp <i class="fab fa-windows"></i></span></a></li>
                <li class="menu"><a href="#" class="nav-item">Trending &nbsp <i class="fas fa-chart-line"></i></span></a></li>
                <li class="menu"><a href="index.html" class="active-item">About <i class="fas fa-id-card-alt"></i></span></a></li>
            </ul>
        </div>
    </nav>
    <article>
        <div class="article">
            <br>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Ipsum consequat nisl vel pretium
                lectus. Justo nec ultrices dui sapien. Aliquam purus sit amet luctus venenatis lectus magna fringilla urna. Maecenas ultricies mi eget mauris. Mauris a diam maecenas sed enim. At quis risus sed vulputate. Nec ullamcorper sit amet risus
                nullam eget felis. Sit amet dictum sit amet justo. Eu facilisis sed odio morbi quis commodo odio aenean.</p>
            <br>
            <p>Proin nibh nisl condimentum id venenatis. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Fringilla ut morbi tincidunt augue interdum. Vehicula ipsum a arcu cursus vitae. Consequat nisl vel pretium lectus quam id leo in vitae.
                Mattis rhoncus urna neque viverra justo nec ultrices. Commodo elit at imperdiet dui accumsan sit amet. Nunc sed id semper risus in. At erat pellentesque adipiscing commodo elit. Facilisi nullam vehicula ipsum a arcu cursus vitae. Scelerisque
                viverra mauris in aliquam. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Euismod nisi porta lorem mollis aliquam ut porttitor leo.</p><br>
            <!--<marquee><p class="divider">#*************************************************************************************************************************************************************************************************************************************</p></marquee>-->

        </div>
        <div class="social"><a><i class="fa fa-facebook" aria-hidden="true"></i></a><a><i class="fa fa-telegram" aria-hidden="true"></i></a></div>
    </article>
    <footer>
        <div class="foot-container">
            <div class="foot-section">
                <h4>Android</h4>
                <a href="#" class="foot-sec-item">Apps</a>
                <a href="#" class="foot-sec-item">Games</a>
                <a href="#" class="foot-sec-item">Tools</a><br>
            </div>
            <div class="foot-section">
                <h4>Windows</h4>
                <a href="#" class="foot-sec-item">Softwares</a>
                <a href="#" class="foot-sec-item">Games</a>
                <a href="#" class="foot-sec-item">Tools</a><br>
            </div>
            <div class="foot-section">
                <h4>Others</h4>
                <a href="#" class="foot-sec-item">WebTools</a>
                <a href="#" class="foot-sec-item">Source Code</a>
                <a href="#" class="foot-sec-item">O.S.</a><br>
            </div>
            <address>
                        MixHacxTricks<br> 
                        Web Site: Soon Uploaded<br> 
                        Developer:Priyanshu Agrawal<br>
                        Contact:-<br>Email:<br>[email protected]<br>
                    </address>
        </div>
    </footer>




</body>

    <script src="js/myscript.js"></script>

</html>
Tags:

5

Answers


  1. 0

    Wrap Javascript code in DOMContentLoaded event

    Like

    document.addEventListener("DOMContentLoaded", function(event) { 
   //do work
});

    More information

    https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

    document.addEventListener("DOMContentLoaded", function(event) {
  console.log('test1')
  let elemens = document.getElementsByTagName('p');
  for (let i = 0; i < elemens.length; i++) {
    elemens[i].style.color = 'red';
  }
});
    /* * {
    margin: 0;
} */


}
body {
  margin: 0;
  box-sizing: border-box;
  display: block;
  background: #eee;
}
header {
  color: white;
  background: linear-gradient(to left, #222, black, #222);
  box-sizing: border-box;
  border-bottom: 2px solid #999;
  display: block;
  overflow: hidden;
  width: 100%;
  text-align: center;
  padding: 22px;
  padding-bottom: 20px;
}
header .page-title {
  cursor: pointer;
  display: block;
  font-size: 25px;
  font-variant: small-caps;
  transition: color 1s linear, font-size 1s linear;
}
header .page-title:hover {
  cursor: pointer;
  font-size: 25px;
  color: green;
  text-shadow: 0 0 7px #004800;
  transition: color 1s linear, font-size 1s linear, text-shadow 2s linear;
}
//not working.pagetitle:hover < header {background:black;}
.search {
  float: left;
  text-decoration: none;
  font-size: 15px;
  padding: 17.5px;
  display: inline-block;
  border: none;
  border-left: 1px solid white;
  box-sizing: border-box;
  color: white;
  background: black;
  width: 88%;
}
.icon {
  float: left;
  border-right: none;
  text-align: : left;
  box-sizing: border-box;
  background: black;
  margin: 0;
  display: inline-block;
  color: white;
  padding: 17.5px;
  font-size: 15px;
  width: 6%;
}
input:focus {
  outline: none;
}

/*input:before{
            border:1px solid black:
            content:"";
            }
            //.icon:before{
            border:1px solid black;
            content:"";
            }
            */
.contextBtn {
  //box-shadow:inset 0 0 7px white;
  border-top: 1px solid white;
  font-size: 15px;
  padding: 15px;
  display: block;
  box-sizing: border-box;
  text-align: center;
  width: 100%;
  background: black;
  color: white;
}
ul {
  list-style-type: none;
  padding: 0 0 5px 0;
  margin: 0;
  box-shadow: 0 0 3px black;
}
li {
  width: 100%;
}
li a {
  position: relative;
  color: #fff;
  //background:#333;
  background: linear-gradient(to left, black, #222, black);
  font-size: 110%;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  margin: auto;
  //padding:3%;
  padding: 20px;
  width: 100%;
  height: 6%;
  display: block;
  overflow: hidden;
  box-shadow: 0px -1px 1px white;
  transition: width 1s, border-radius 2s, padding 1.5s, background 1.5s, font-size 1s, border-left 2s, border-right 2s;
}
li a:hover:not(.active-item) {
  box-sizing: border-box;
  display: block;
  background: linear-gradient(to left, #1B1B1B, black, #1B1B1B);
  font-size: 120%;
  margin-left: auto 10%;
  width: 80%;
  height: 6%;
  overflow: hidden;
  //padding:4%;
  padding: 23px;
  border-left: 3px solid green;
  border-right: 3px solid green;
  border-radius: 25px;
  box-shadow: 0 0 3px #67FF67;
  box-shadow: inset 0 0 7px #69FF69;
  transition: width 1.5s, background 3s linear 0.2, border-radius 1s linear, font-size 0.2s linear 0.1s, margin 2s linear 5s, padding 2s, border-right 1s linear 1s, border-left 1s linear 1s, box-shadow 1s linear 2s;
  //transition:width 1.5s, background 1.5s,border-radius 1.5s;
}
li a:active {
  background-color: red;
}
li a:before {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  box-sizing: border-box;
  left: 50%;
  transition: width 2s linear, left 2s linear, height 0.4s linear 0.1s;
}
li a:hover:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  border: 3px solid green;
  border-left: 0px solid green;
  border-right: 0px solid green;
  border-top: 2px solid green;
  box-sizing: border-box;
  bottom: 0;
  left: 0;
  transition: width 1s linear, left 1s linear, height 0.2s linear 0.1s, box-shadow 3s linear 2s;
}
li a:after {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  box-sizing: border-box;
  right: 50%;
  transition: width 2s linear, right 2s linear, height 0.4s linear 0.1s;
}
li a:hover:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  border: 2px solid green;
  border-left: 0px solid green;
  border-right: 0px solid green;
  border-top: 1px solid green;
  box-sizing: border-box;
  bottom: 0;
  right: 0;
  transition: width 1s linear, right 1s linear, height 0.2s linear 0.1s;
}
li a.active-item {
  //position: relative;
  background: green;
  padding: 25px;
  border-radius: 30px;
  border-top: 0.5px solid #989898;
  border-bottom: 0.2px solid black;
  width: 80%;
  margin: auto;
  font-size: 22px;
  box-shadow: 0 0 5px #3F7D00;
}
li a.active-item:hover {
  border: 1px solid green;
  box-shadow: 0 0px 5px #3F7D00;
}
article {
  //position: relative;
  margin: 2px;
  padding: 20px 8px;
  box-shadow: 0px 0px 5px black;
  //font-size:20px;
}
article p {
  font-size: 15px;
}
.divider {
  text-align: center;
}
footer {
  margin: 0 2px 5px 2px;
  background: grey;
}
.foot-container {
  background: grey;
  //position: relative;
  box-sizing: border-box;
  box-shadow: 0 1px 5px black;
}
.foot-section {
  line-height: 25px;
  text-align: center;
  color: white;
  float: left;
  margin: 0.1111111111111111%;
  width: 33%;
  box-sizing: border-box;
  box-shadow: 0 0 1px black;
}

/* .foot-section:after{
                    content"";
                    display:table;
                    clear:both;
                }*/
.foot-section h4 {
  //text-decoration:underline;
  display: inline-block;
  margin: 6px auto 8px auto;
  font-size: 110%;
}
.foot-section a {
  color: white;
  text-decoration: none;
  display: block;
  clear: both;
}
.foot-section a:hover {
  font-size: 90%;
  box-shadow: inset 0 0 7px #2F2F2F;
}
address {
  text-decoration: none;
  margin: 5px auto;
  line-height: 20px;
  box-shadow: 0 0 5px black;
  text-align: center;
  color: white;
}
.social {
  width: 100%;
  display: block;
  box-sizing: border-box;
  text-align: center;
  //bottom: 0;
}
.social a {
  border: 1px solid black;
  border-radius: 8.5px;
  width: 17px;
  height: 17px;
  margin: 2px;
  padding: 3px;
  display: inline-block;
  box-shadow: 0 0 5px black;
}
.social a:hover {
  color: white;
  background: black;
}
@media only screen and (min-width: 500px) {
  body {
    background: white;
    //position: relative;
  }
  /* .contextBtn {
        display: none;
    } */
  
  li a {
    overflow-y: hidden;
    //position: sticky;
    width: 25%;
    float: left;
    top: 0;
    transition: none;
  }
  
  li a:hover:not(.active-item) {
    width: 25%;
    padding: 20px;
    z-index: 1;
    border-radius: 0%;
    font-size: initial;
    transition: none;
  }
  
  li a.active-item {
    display: none;
  }
  
  article {
    margin: 50px 5px 10px 5px;
    padding: 50px 5px;
  }
  
  .icon {
    width: 8%;
  }
  
  .search {
    width: 92%;
  }
}

/* @media only screen and (min-width:350px) {
    .contextBtn {
        display: none;
    }
    
    .search {
        width: 90%;
    }
    
    .icon {
        width: 8%;
    }
} */
    <!DOCTYPE html>

<html lang="en">

<head>
  <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0 ">
  <title>About Us </title>
  <link rel="stylesheet" href="style/mystyles.css">
  <script src="https://kit.fontawesome.com/7e25e18c01.js" crossorigin="anonymous"></script>
  <!-- https: //cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.16/svg.min.js -->
  <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->

</head>

<body>
  <header>
    <h1 class="page-title">About MixHacxTricks &nbsp &nbsp
      <i class="fas fa-id-card-alt"></i></h1>
  </header>
  <nav>

    <div>
      <ul>
        <div class="search-area"><input class="search" type="search" placeholder="Search">
          <!--<label class="icon">-->
          <span class="icon"> <i class="fas fa-search"></i></span>
          <!--</label>-->
        </div>
        <span class="contextBtn" id="context">  x  </span>
        <li class="menu"><a href="#" class="nav-item">Home     &nbsp <i class="fas fa-home"></i></span></a></li>
        <li class="menu"><a href="#" class="nav-item">Android  &nbsp <i class="fab fa-android"></i></span></a></li>
        <li class="menu"><a href="#" class="nav-item">Windows  &nbsp <i class="fab fa-windows"></i></span></a></li>
        <li class="menu"><a href="#" class="nav-item">Trending &nbsp <i class="fas fa-chart-line"></i></span></a></li>
        <li class="menu"><a href="index.html" class="active-item">About <i class="fas fa-id-card-alt"></i></span></a></li>
      </ul>
    </div>
  </nav>
  <article>
    <div class="article">
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Ipsum consequat nisl vel pretium lectus.
        Justo nec ultrices dui sapien. Aliquam purus sit amet luctus venenatis lectus magna fringilla urna. Maecenas ultricies mi eget mauris. Mauris a diam maecenas sed enim. At quis risus sed vulputate. Nec ullamcorper sit amet risus nullam eget felis.
        Sit amet dictum sit amet justo. Eu facilisis sed odio morbi quis commodo odio aenean.</p>
      <br>
      <p>Proin nibh nisl condimentum id venenatis. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Fringilla ut morbi tincidunt augue interdum. Vehicula ipsum a arcu cursus vitae. Consequat nisl vel pretium lectus quam id leo in vitae.
        Mattis rhoncus urna neque viverra justo nec ultrices. Commodo elit at imperdiet dui accumsan sit amet. Nunc sed id semper risus in. At erat pellentesque adipiscing commodo elit. Facilisi nullam vehicula ipsum a arcu cursus vitae. Scelerisque viverra
        mauris in aliquam. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Euismod nisi porta lorem mollis aliquam ut porttitor leo.</p><br>
      <!--<marquee><p class="divider">#*************************************************************************************************************************************************************************************************************************************</p></marquee>-->

    </div>
    <div class="social"><a><i class="fa fa-facebook" aria-hidden="true"></i></a><a><i class="fa fa-telegram" aria-hidden="true"></i></a></div>
  </article>
  <footer>
    <div class="foot-container">
      <div class="foot-section">
        <h4>Android</h4>
        <a href="#" class="foot-sec-item">Apps</a>
        <a href="#" class="foot-sec-item">Games</a>
        <a href="#" class="foot-sec-item">Tools</a><br>
      </div>
      <div class="foot-section">
        <h4>Windows</h4>
        <a href="#" class="foot-sec-item">Softwares</a>
        <a href="#" class="foot-sec-item">Games</a>
        <a href="#" class="foot-sec-item">Tools</a><br>
      </div>
      <div class="foot-section">
        <h4>Others</h4>
        <a href="#" class="foot-sec-item">WebTools</a>
        <a href="#" class="foot-sec-item">Source Code</a>
        <a href="#" class="foot-sec-item">O.S.</a><br>
      </div>
      <address>
                        MixHacxTricks<br> 
                        Web Site: Soon Uploaded<br> 
                        Developer:Priyanshu Agrawal<br>
                        Contact:-<br>Email:<br>[email protected]<br>
                    </address>
    </div>
  </footer>




</body>

</html>
    Login or Signup to reply.
  2. 0

    You are loading the script tag in the Head without any delay. So when the page loads, it loads JS first then the body of the Page. I will suggest calling it after the body so that the whole page loads first and after that, the JS loads so that it can have access to the DOM otherwise it will not find any object. That is why it is not working. Load it like this:

    </body>
<script src="name.js"></script>
</html>

    After the body tag and it should work just fine.

    Login or Signup to reply.
  3. 0

    The problem is you are loading your js script before rendering elements on the page.
    You can use defer attribute for the script tag to launch script after page rendering.

    <script src="js/myscript.js" defer>

    getElementsByTagName() is returning a HTMLCollection, so here is a working code:

    console.log('test1');
let elemens = document.getElementsByTagName('p');
for (let i=0; i < elemens.length; i++) {
    elemens[i].style.color = 'red';
}
console.log(elemens);

    And by the way, is it a typo with elemens variable up above?

    Login or Signup to reply.
  4. 0

    This is mostly because your javaScript is loading before the completely loading of DOM.

    there is two Way you can Solve this

    1st By wrapping you js code with

    window.onload = function() {
   // Your code
}

    2nd By placing your Script tag after body.

    </body>
<script src="name.js"></script>
</html>
    Login or Signup to reply.
  5. 0 
                <p class="mp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Ipsum consequat nisl vel pretium
                lectus. Justo nec ultrices dui sapien. Aliquam purus sit amet luctus venenatis lectus magna fringilla urna. Maecenas ultricies mi eget mauris. Mauris a diam maecenas sed enim. At quis risus sed vulputate. Nec ullamcorper sit amet risus
                nullam eget felis. Sit amet dictum sit amet justo. Eu facilisis sed odio morbi quis commodo odio aenean.</p>
            <br>
            <p class="mp">Proin nibh nisl condimentum id venenatis. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Fringilla ut morbi tincidunt augue interdum. Vehicula ipsum a arcu cursus vitae. Consequat nisl vel pretium lectus quam id leo in vitae.
                Mattis rhoncus urna neque viverra justo nec ultrices. Commodo elit at imperdiet dui accumsan sit amet. Nunc sed id semper risus in. At erat pellentesque adipiscing commodo elit. Facilisi nullam vehicula ipsum a arcu cursus vitae. Scelerisque
                viverra mauris in aliquam. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Euismod nisi porta lorem mollis aliquam ut porttitor leo.</p><br>
            <!--<marquee><p class="divider">#*************************************************************************************************************************************************************************************************************************************</p></marquee>-->


<!-- always place js in footer -->

<!-- method by classname in javascript-->
<script>
var x = document.getElementsByClassName("mp");
  x[0].style.color = "red";
  x[1].style.color = "blue";
</script>

<!-- method by tag in jquery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  
<script>
  jQuery("p").css("color", "yellow");
</script>

</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search