javascriptjqueryhtmlcssgoogle-web-designer

Image src not changing using javascript

I have written this code for a marquee effect in CSS and now I am using javascript for changing the image but it is not working even though the code is correct. please let me know what is the issue.

I have tried all the possible code and also rearrangement of the code but it is not working out.

HTML file

<!DOCTYPE html>
<html>
<head>

    <title>Marquee Effect</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, 
 initial-scale=1">
    <link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/b 
 ootstrap.min.css">
    <link rel="stylesheet" type="text/css" 
href="main.css">



</head>
<body>
<div class="marquee">
    <img src = "2.jpg" class="img-responsive">
</div>
<script type="text/javascript">

function myTimer() {
    var divtag = document.getElementByClass("marquee");
    divtag.getElementByClass("img-responsive").src = 
"3.jpg";
   }

var fun = setInterval(myTimer, 12500); 

</script>

</body>

 </html>

css file

@-webkit-keyframes scroll{
    0% {
        -webkit-transform: translate(0,-120%);
    }
    50%{
        -webkit-transform: translate(0,50%);
        -webkit-transition-delay(1);
    }
    100% {
        -webkit-transform: translate(0,245%);
    }
}


.marquee{
    width:100%;
    height:100%;
    overflow: hidden;


}

.marquee img{
    float: right;
    width:40%;
    height:40%;
    position: relative;
    -webkit-animation:scroll 12s infinite linear;
    opacity: 0.7;
}

html, body{
  width:100%;
  height:100%;
  background-color: black;
  overflow:hidden;
}

Help me

Solution

  • If you open up the developer tools (F12) in your browser you will see the following error message repeating:

    Uncaught TypeError: document.getElementByClass is not a function at myTimer

    Simply put, getElementByClass is a non-existent function. There's a getElementsByClassName function on the document object which you could use.

    But, I'd recommend using the document.querySelector function which uses the CSS syntax to select the element you want. It returns a single element node. If you need to operate on multiple elements, then use its counterpart, the document.querySelectorAll function, which will return a collection of element nodes.

    So here's the code that you can use in your myTimer function:

    document.querySelector(".marquee .img-responsive").src="3.jpg"