CODEWITHSUNDEEP
javascriptmethodsprompt
user8521147
user8521147

Reputation:

Troublehooting with prompt method in javascript

Hey I'm having a problem with the prompt method in Javascript.
What I try to do is make the H1 equal to the user his answer.
The problem is that the function does not take the answer in it's function.
I tried to find something about it on youtube without succes.
Any tips or help would be appreciated

$(document).ready(function() {
    console.log('Document loaded');   
});

let answer = prompt('name of club?');

function changeDOM() {
    $('.front').text(answer);
};

changeDOM();
<DOCTYPE html>
<html>
<head>
    <link href="main.css" type="text/css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Anton|Pacifico|Maven+Pro" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="main.js" type="text/javascript"></script>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>HAL Tech</title>
</head>
        
<body>
    
    <div class="parallax-group">
        <h1 class="front">HAL Tech</h1>
        
        <!--
        <ul class="nav">
            <li href="#">Tech club</li>
            <li href="#">Te doen</li>
            <li href="#">Projecten</li>
            <li href="#">Dingen</li>
        </ul> 
        -->
        
        <img src="POEP.jpg" class="back" alt="">
    </div>
</body>
    
</html>

Upvotes: 0

Views: 42

Answers (1)

UncleDave
UncleDave

Reputation: 7188

'answer' in $('.front').text('answer'); should not be a string, it should reference your answer variable:

$('.front').text(answer);

'answer' is the literal string "answer", whereas answer refers to your variable.

$(document).ready(function() {
  console.log('Document loaded');

  let answer = prompt('name of club?');

  function changeDOM() {
    $('.front').text(answer);
  };

  changeDOM();
});
<DOCTYPE html>
  <html>

  <head>
    <link href="main.css" type="text/css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Anton|Pacifico|Maven+Pro" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="main.js" type="text/javascript"></script>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>HAL Tech</title>
  </head>

  <body>

    <div class="parallax-group">
      <h1 class="front">HAL Tech</h1>

      <!--
        <ul class="nav">
            <li href="#">Tech club</li>
            <li href="#">Te doen</li>
            <li href="#">Projecten</li>
            <li href="#">Dingen</li>
        </ul> 
        -->

      <img src="POEP.jpg" class="back" alt="">
    </div>
  </body>

  </html>

As further discussed in the comments, your JS is running before the DOM loads. You can either move it to the bottom of the body, or change your code to be within the $(document).ready function:

$(document).ready(function() {
    console.log('Document loaded');   

    let answer = prompt('name of club?');

    function changeDOM() {
        $('.front').text(answer);
    };

    changeDOM();
});

Upvotes: 2

Related Questions