Shuffle given strings with Javascript

Question

How to shuffle random (given) strings every refresh? Every refresh, i want to show a different "author" you can ignore the 'quote' or 'order1'

This is what i have:
(sorry i started learning the JS basics, this is the result of a page of what i want to accomplish)

Im a beginner so please explain the solution and go easy on me

Please fix according to jsfiddle or create a similar one

const quotes = [
{
quote: 'QRimg1.jpg', //or https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=text1
author: 'text1',
  order1: 'Order ID: #1'
},

{
quote: 'QRimg2.jpg', //or https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=text2
author: 'text2',
  order1: 'Order ID: #2'
}, 

]

const quoteBtn = document.getElementById('quote-btn');
const quote = document.querySelector('.quote');
const author = document.querySelector('.author');
const order1 = document.querySelector('.order1');

function qrCode() {
let random = Math.floor(Math.random() * quotes.length);

quote.getElementsByTagName("IMG")[0].src = quotes[random].quote;
author.innerHTML = quotes[random].author;
order1.innerHTML = quotes[random].order1;
}

#box1{
        
    margin-top:70px;
    margin-left:35px;
    width:430px;
    
}
    
.tablink {
  background-color: #555;
  color: black;
    font-weight: 500;
  float: left;
  border: solid 1px black;
    margin-top:0px;
  outline: none;
  cursor: pointer;
  padding: 8px 8px;
  font-size: 15px;
    width:100%;
    }


/* Style the tab content */
.tabcontent {
  border:solid black 2px;
    color: black;
  display: none;
  padding:100px;
  text-align: center;
    height:380px;
    }


.container_box{
margin: 20px;
margin-top:50px;
width:455px;
height:400px; 
}


.quote img{
width: 160px;
height: 160px;
margin-top:-85px;
display: block;
margin-left: 13px;
margin-right: auto;
margin-bottom:10px;
z-index:100;
}

.order1{
font-size:18px;
color:black;
font-weight:800;
left:50px;
position:absolute;
margin-top:-35px;
z-index:50;   
}

*{
    box-sizing:border-box;
}

.container{
    width:50%;
}

.author{
    font-size:15px;
    color:black;
    font-weight:400;
  border:1px solid black;
    border-radius:3px;
    background-color: #f0f0f0;
    width: 352px;
    height:22px;
    padding-top:2px;
}

.author{
    position:absolute;
    left:72px;
    top:320px;
}

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

<div id= "box1">
<div class="tablink" onclick="someFunction('orange', this, '#FF9900')" id="defaultOpen">Some text</div>
<div class="order1">ID: #0</div>
<div id="orange" class="tabcontent">
 
  
<div class="container_box">
<span class="quote"><img src="https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=text0"></span>
</div>

<div class="author">text0</div>
</div>
</div>

  

<script>
  //colorchange for topbar
function someFunction(otherName,elmnt,color) {
var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(otherName).style.display = "block";
  elmnt.style.backgroundColor = color;
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

</script>
<script type="text/javascript"> 
window.onload = qrCode;
</script>
</body>
</html>

Shuffle given strings with Javascript

0 Answers0