Javascript Shuffle and Random Text in every second using two Function doesn't work-CodePudding

I Need your Help for This Coding Because it doesn't work or only working for 1 class of javascript. Here's My Coding

HTML

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
<div="container">
<div>
<p  id="fruit">Grape</p>
</div>
<p  id="animal">Shark</p>
</div>
</div>

<div="container">
<div>
<p  id="fruit1">Strawberry</p> //The coding of javascript only works in fruit or in animal
</div>
<p  id="animal1">Unicorn</p>
</div>
</div>
</body>
</html>

Javascript internal

<script>
var fruit = ["Apple", "Banana", "Cerry", "Dragonfruit","Eldberry", "Guava", "Jackfruit", "Longan", "Mango", "Orange", "Pineapple", "Watermelon"]; 
var t = setInterval(function() { 
var randomNumber = Math.round( Math.random() * (fruit.length-1) ); 
$('.fruit').html( fruit[ randomNumber ] ); 
}, 5000); 
document.getElementByID("fruit").innerHTML;
</script>

Thankyou sir

CodePudding user response：

First, you had typo in your last line of JavaScript - document.getElementByID("fruit").innerHTML; (ID is supposed to be Id) - document.getElementById("fruit").innerHTML;

I've changed, instead of using JQuery, I used pure JavaScript.

var fruit = ["Apple", "Banana", "Cerry", "Dragonfruit","Eldberry", "Guava", "Jackfruit", "Longan", "Mango", "Orange", "Pineapple", "Watermelon"]; 
var t = setInterval(function() { 
var randomNumber = Math.round( Math.random() * (fruit.length-1) ); 
const frt = document.getElementById('fruit'); //get element that you want to change
frt.innerHTML = fruit[randomNumber];//set the value
}, 1000);

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
<div="container">
<div>
<p  id="fruit">Grape</p>
</div>
<p  id="animal">Shark</p>
</div>
</div>

<div="container">
<div>
<p  id="fruit1">Strawberry</p> 
</div>
<p  id="animal1">Unicorn</p>
</div>
</div>
</body>
</html>

CodePudding user response：

you are calling an ID using "dot" insted of "#" you need to change for animal $('.animal') to $('#animal') and $('.animal1') to $('#animal') same for fruit1.

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
<div="container">
<div>
<p  id="fruit">Grape</p>
</div>
<p  id="animal">Shark</p>
</div>
</div>

<div="container">
<div>
<p  id="fruit1">Strawberry</p> 
<!-- The coding of javascript only works in fruit or in animal -->
</div>
<p  id="animal1">Unicorn</p>
</div>
</div>
<script>
    var fruit = ["Apple", "Banana", "Cerry", "Dragonfruit","Eldberry", "Guava", "Jackfruit", "Longan", "Mango", "Orange", "Pineapple", "Watermelon"]; 
    var t = setInterval(function() { 
    var randomNumber = Math.round(Math.random()*(fruit.length-1)); 
    $('#fruit').html(fruit[randomNumber]); 
    }, 1000); 
    document.getElementById("fruit").innerHTML;


    var animal = ["Ant", "Bear", "Cat", "Dogt","Elephant", "Gorilla", "Horse", "", "Jelly fish", "Lion", "Monkey", "Pinguin", "Rabit", "Sheep", "Turtle", "Unicorn", "Zebra"]; var t = setInterval(function() { var randomNumber = Math.round(Math.random()*(animal.length-1)); $('#animal').html(animal[randomNumber]); }, 1000); document.getElementById("animal").innerHTML;
     var fruit = ["Apple", "Banana", "Cerry", "Dragonfruit","Eldberry", "Guava", "Jackfruit", "Longan", "Mango", "Orange", "Pineapple", "Watermelon"]; var t = setInterval(function() { var randomNumber = Math.round(Math.random()*(fruit.length-1)); $('#fruit1').html(fruit[randomNumber]); }, 1000); document.getElementById("fruit1").innerHTML;
    var animal = ["Ant", "Bear", "Cat", "Dogt","Elephant", "Gorilla", "Horse", "", "Jelly fish", "Lion", "Monkey", "Pinguin", "Rabit", "Sheep", "Turtle", "Unicorn", "Zebra"]; var t = setInterval(function() { var randomNumber = Math.round(Math.random()*(animal.length-1)); $('#animal1').html(animal[randomNumber]); }, 1000); document.getElementById("animal1").innerHTML;
    </script>
</body>
</html>