OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Unable to access html

  • Thread starter Thread starter Philip Markert
  • Start date Start date
P

Philip Markert

Guest
I am a newbie to Hugo and am currently just playing around with a basic template to get a feeling for it. As i'm trying to integrate a javascript snippet to build a popup it seems like the script is unable to call or change my html and css.

Code:
    console.log('Am here?');

    const popup = document.getElementsByClassName('tryme')[0];
    function openPopup(){
    popup.style.display = 'block';
    console.log('Hello?');
    }

    function hello(){
    for (let i = 0; i < 50; i++) {
        console.log(i);
          }
    }  
    hello()

    console.log('Hello?');

Code:
    <!DOCTYPE html>
    <html lang="{{ or site.Language.LanguageCode site.Language.Lang }}" dir="{{ or 
    site.Language.LanguageDirection `ltr` }}">
    <head>
    {{ partial "head.html" . }}
    </head>
    <body id="body">
    <header>
    <button onclick="openPopup">OPEN</button>
    <div class="tryme"></div>
    {{ partial "header.html" . }}
    </header>
    <main>
    {{ block "main" . }}{{ end }}
    </main>
    <footer>
    {{ partial "footer.html" . }}
    </footer>
  
    </body>

    </html>

Code:
    .tryme {
      position: fixed;
      background-color: antiquewhite;
      width: 100%;
      height: 100%;
       display: none;
    }

I have tried adding the script into the baseof.html or the main.js but got the same results either way. i have also tried to adress the html in different ways (id, class, queryselector), i have also added different print commands at different stages of the script and the ones that don't refer to any html are working fine, only the one inside the function that is supposed to change the display property of .tryme is not showing in the console.

<p>I am a newbie to Hugo and am currently just playing around with a basic template to get a feeling for it. As i'm trying to integrate a javascript snippet to build a popup it seems like the script is unable to call or change my html and css.</p>
<pre class="lang-js prettyprint-override"><code> console.log('Am here?');

const popup = document.getElementsByClassName('tryme')[0];
function openPopup(){
popup.style.display = 'block';
console.log('Hello?');
}

function hello(){
for (let i = 0; i < 50; i++) {
console.log(i);
}
}
hello()

console.log('Hello?');
</code></pre>
<pre class="lang-html prettyprint-override"><code> <!DOCTYPE html>
<html lang="{{ or site.Language.LanguageCode site.Language.Lang }}" dir="{{ or
site.Language.LanguageDirection `ltr` }}">
<head>
{{ partial "head.html" . }}
</head>
<body id="body">
<header>
<button onclick="openPopup">OPEN</button>
<div class="tryme"></div>
{{ partial "header.html" . }}
</header>
<main>
{{ block "main" . }}{{ end }}
</main>
<footer>
{{ partial "footer.html" . }}
</footer>

</body>

</html>
</code></pre>
<pre class="lang-css prettyprint-override"><code> .tryme {
position: fixed;
background-color: antiquewhite;
width: 100%;
height: 100%;
display: none;
}
</code></pre>
<p>I have tried adding the script into the baseof.html or the main.js but got the same results either way. i have also tried to adress the html in different ways (id, class, queryselector), i have also added different print commands at different stages of the script and the ones that don't refer to any html are working fine, only the one inside the function that is supposed to change the display property of .tryme is not showing in the console.</p>
 

Latest posts

G
Replies
0
Views
1
Gamal Othman
G
Top