Problems with Javascript and CodePen

I’m working on the Random Quote Challenge and ran into a problem I cannot resolve, so I need some other pair of eyes identifying what I miss.

I want to use the window.open() function when clicking on a button, right now there is only the twitter button implemented. For test purposes, it’s supposed to open a German news page (tagesschau.de) to start with. But when I click the button nothing happns.

You can find the code here:

Trying to nail the error down I created a new pen. As far as I see it every relevant part is copied there. But in this pen,clicking the button opens the page as intended:
https://codepen.io/tonnerkiller/pen/OzmLEq

Does anybody of you see why it doesn’t work in the fist pen but does in the second?

Thank you.

1 Like

Thanks for the hint. Didn’t imagine the HTML could be a problem…

1 Like

I figured what was causing the problem and I was correct about it being in the html section.

In the last line of your html (see below), you started a comment, but did not close it with -->.

<!-- class ="container">

When you opened that last comment but did not close it, it caused a problem for the way Codepen inserts other code behind the scenes for you. Codepen automatically inserts all the external scripts and your JS module section at the end of your html section, so when everything is put together and shown in the preview window, your code looks like the code below. Notice how starting at the <script> tags near the bottom, everything is commented out? This caused the JavaScript not to work.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>The Quotes Machine</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
  
  <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Lobster" rel="stylesheet"> 
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-bta.2/css/bootstrap.css'>
  <link rel="stylesheet" href="css/style.css"> 
</head>

<body>
  <div class="container">
    <div class="row" id="headline-row">
      <div class="col">
        <h1 class="text-center" id="headline">The Quotes Machine</h1>
      </div>
    </div> <!-- row-->
    <div class="row align-items-center" id="quotes-row"> 
      <div class="col">
        <div id="quotes-box"class="text-center">
          <p id="quote">Quotes go here</p>
          <p id="author" class="text-right">Authors go here</p>
        </div>
      </div>
    </div>
    <div class="row" id="buttons-row">
      <div class="col-sm-7">
        <div id="button-box">
          <div class="social-buttons">
              <button class="btn btn-info" title="Tweet it" id="tweetbutton" target="_blank"><i class="fa fa-twitter"></i></button>
            <button class="btn btn-info" title="Share on GNU.social"><img src="https://hub.debenny.de/photo/7777838ad02f6ddbcaedd69afdb307bf7839e5ee496dcb6c39da1fdd866974d0-0.png" alt="GNU.social Icon" height="20em"></button>
            <button class="btn btn-info" title="Share on Hubzilla"><i class=" hublogo-hubs"></i></button>
          </div>
        </div><!-- button-box -->
      </div><!-- column -->
      <div class="col-sm-5">
        <button id="newquote" class="btn btn-primary" title="New Quote">New Quote</button>
      </div>
    </div><!-- row end -->
  </div><!-- class ="container">
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
  <script  src="js/index.js"></script>
</body>
</html>
2 Likes

Thank you for finding out! What a stupid typo! I would have been searching forever I’m afraid.

1 Like