CODEWITHSUNDEEP
elm
C.S.Reddy Gadipally
C.S.Reddy Gadipally

Reputation: 1758

Missing html elements in index.html except elm div - Elm 0.19

My index page is displaying only "elm" div in the body and not the google-sign-in div and testing h1 as I have in the following index.html. When I inspected them using browser tools, I did not see the elements.

When I comment out or remove var app = Elm.Main.init({ node: document.getElementById('elm') }); the browser displays the google div and h1 elements.

What is the reason and how can I solve it?

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>Main</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="google-signin-client_id" content="XXXXX.apps.googleusercontent.com">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <script src="https://apis.google.com/js/platform.js" async defer></script>

  <script src="main.js"></script>

</head>

<body>
  <div class="g-signin2" data-onsuccess="onSignIn"></div>
  <br>
  <br>
  <h1>Testing</h1>

  <div id="elm"></div>
  <script>
    function onSignIn(googleUser) {
      var profile = googleUser.getBasicProfile();
      console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
      console.log('Name: ' + profile.getName());
      console.log('Image URL: ' + profile.getImageUrl());
      console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
    }

    var app = Elm.Main.init({
      node: document.getElementById('elm')
    });
  </script>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>
</html>

My Elm program.

-- MAIN

main : Program () Model Msg
main =
  Browser.application
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions
    , onUrlChange = UrlChanged
    , onUrlRequest = LinkClicked
    }

I also tried changing style of the elm div <div id="elm" style="width:50%; height:400px;"></div>

elm 0.19 Firefox

Upvotes: 0

Views: 286

Answers (1)

simplystuart
simplystuart

Reputation: 463

If you want access to elements in your body along with elm then I would use Browser.element. Otherwise Browser.document and Browser.application manage the body for you (what you are seeing currently).

More information here: https://package.elm-lang.org/packages/elm/browser/latest/Browser#element

Upvotes: 4

Related Questions