My message does not display after I run the code. Need some direction, I double checked my code. Might be a syntactical error somewhere
HTML- <!doctype html>
<html>
<head>
<title>Message Generator</title>
<link rel="stylesheet" href="index.css">
<center><div class="wordart blues"><span class="text">Message Generator</span></div></center>
</head>
<body>
<div class="quoteDisplay"><center>Your random message will be displayed here</center></div>
<div id="quote">
<!--Quote will display here-->
</div>
<center><button onclick="messageGenerator()">Click Here</button></center>
<script src="index.js"></script>
</body>
</html>
Javascript-
const first = ["Mom", "Dad", "Uncle", "Dog", "Cat", "Brother", "Sister", "Aunt", "Random Stranger", "Respect", "Honor", "Dignity", "Brain", "Life"]
const second = ["Ocean", "Sea", "Volcano", "Tornado", "Ditch", "Cave", "Typhoon", "Asia", "India"]
const third=["Unknown","To explore","To prove a point","To live life with no constraints","Just cause"]
function randomGenerate(value) {
var item = value[Math.floor(Math.random() * value.length)];
return item;
}
const messageGenerator = () => {
let person = randomGenerate(first);
let place = randomGenerate(second);
let reason = randomGenerate(third);
let finalSentence = `Your ${person} jumped in the ${place}\nReason: ${reason}`;
document.getElementById("quoteDisplay").innerHTML=finalSentence; }
document.getElementById("quoteDisplay") looks for an element with ID of "quoteDisplay". In this case, your targeted element is a class.
document.querySelector('.quoteDisplay').innerHTML = finalSentence
Although, I think you are trying to target #quote, which in this case, getElementById is the right method but the wrong id
document.getElementById("quote").innerHTML = finalSentence;
Looking at your HTML
<div class="quoteDisplay"><center>Your random message will be displayed here</center></div>
<div id="quote">
Looking at your javascript
document.getElementById("quoteDisplay").innerHTML=finalSentence;
It should be document.getElementById("quote").innerText = finalSentence;