How do I make the placeholder text of a text input randomly change on page refresh using only basic-CodePudding

This one ALMOST helped, but then I tried it and didn't understand, like at ALL Random/new text on page refresh and page load Current code in the HTML File relating to this:

 <input type="file" id="imag" name="imag" accept="image/*" /><br><br>

 <input type="Text" id="quot" name="quot" placeholder="Grass grows, birds fly, sun shines. and 
 brotha, I hurt people"><br>

and in the JS file:

const imag = document.querySelector("#imag");
const bild = document.querySelector("#bild");

var loadFile = function(event) {
var image = document.getElementById('imag');
image.src = URL.createObjectURL(event.target.files[0]);
};
document.getElementById('bild').src="image";

const quotes = ["Grass grows, birds fly, sun shines. and brotha, I hurt people.", "If you keep going the way you're going. You're gonna have a bad time...", "I love the smell of napalm in the morning"]
function newQuote() {
    var randomQuote = Math.floor(Math.random() * quotes.length);
    document.getElementById('quot').placeholder = quotes[randomQuote]
   }

so... any help would be appreciated

Edit: Thanks to https://stackoverflow.com/users/1169519/teemu for telling me to not use innerHTML, but it didn't make any difference... please give a more step-by-step explanation in your replies (mostly because I'm stupid, this is NOT just me being an ass trying to get people to not give me suggestions. suggestions are still appreciated, it's just that I'll most likely not get it right)

All the code (in case something else is the problem):

HTML:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="script.js" defer></script>
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <form>
        <input type="radio" id="red" name="col" value="red">
        <label for="red">Rød</label><br>
        <input type="radio" id="blu" name="col" value="blu">
        <label for="blu">Blå</label><br>
        <input type="radio" id="blac" name="col" value="blac">
        <label for="blac">Svart</label><br>
        <label for="imag">Last opp bilde</label><br>
        <input type="file" id="imag" name="imag" accept="image/*" /><br><br>
        <label for="name">Navn:</label>
        <input type="text" id="name" name="name" placeholder="Biggus Dickus"><br>
        <label for="phon">Tlf:</label>
        <input type="text" id="phon" name="phon" placeholder="det trenger du ikke, vi ringer deg"><br>
        <label for="adr">Adr:</label>
        <input type="text" id="adr" name="adr" placeholder="Jeg vet hvor du bor..."><br>
        <label for="quot">Quote:</label>
        <input type="Text" id="quot" name="quot" placeholder="Grass grows, birds fly, sun shines. and brotha, I hurt people"><br>
    </form>
    <div id="card"></div>
    <img id="bild" src="BeanDeepFried.png" alt="BEAN!">
    <h1>If you can read this then the guy writing the code has lost his damn mind because this is fucking impossible to do the way he wants</h1>
</body>
</html>

CSS:

#name{
    width: 704px
}
#phon{
    width: 719px
}
#adr{
    width: 714px
}
#quot{
    width: 700px
}
#bild{
    width: 200px;
}

JS:

const name = document.querySelector("#name");
const red = document.querySelector("#red");
const blu = document.querySelector("#blu");
const blac = document.querySelector("#blac");
const imag = document.querySelector("#imag");
console.log(imag)
const phon = document.querySelector("#phon");
const adr = document.querySelector("#adr");
const quot = document.querySelector("#quot");
const card = document.querySelector("#card");
const bild = document.querySelector("#bild");

var loadFile = function(event) {
    var image = document.getElementById('imag');
    image.src = URL.createObjectURL(event.target.files[0]);
};
document.getElementById('bild').src="image";

const quotes = ["Grass grows, birds fly, sun shines. and brotha, I hurt people.", "If you keep going the way you're going. You're gonna have a bad time...", "I love the smell of napalm in the morning"]
function newQuote() {
    var randomQuote = Math.floor(Math.random() * quotes.length);
    document.getElementById('quot').placeholder = quotes[randomQuote]
   }

CodePudding user response：

You have defined function newQuote, but it is never called.

To call it whenever the page is loaded, add the following statement to the end of your script.js file:

newQuote();