0

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>

Improve this question
4
  • text('answer') is not equal to text(answer) You are also executing your javascript before your element exists Commented Oct 13, 2017 at 16:28
  • jsfiddle.net/0gom2k3m Commented Oct 13, 2017 at 16:30
  • Thanks for answering, sorry to tell you but I tried your method and it didn't work. Commented Oct 13, 2017 at 16:31
  • The code snippet in my answer works, and so does the jsfiddle linked by @Deja, what is not working for you? Is there something you haven't shown us? Commented Oct 13, 2017 at 16:33

1 Answer 1

Reset to default
2

'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();
});
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I copied your code snippet, inserted it into my answer and switched out 'answer' for answer - it works.
For some reason it does not work in my file even tho i used your code snippet. Very strange?
@UncleDave, look at the html they entered, their javascript is at the top, and they call their function immediately. The element isn't going to exist yet. The reason the fiddles work is because the code you enter in the javascript box gets put at the end of the document.
I fixed it. It was because my script tag was not at the end of my body. Sorry for the trouble...
Good spot - I didn't notice the code was outside of document.ready

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.