When I attempt to load trigger functions in another html, the functions aren't being triggered

JavaScript
1

Is there a way to target the ID of a div element within another html page using Javascript? Ive been using document.getElementByID which works fine when targeting Ids within the main index.html template.

When I create a separate html template and load in another Javascript file within the head of the page, the functions are no longer being triggered.

Can anyone tell me why this is?

2

Well typically JavaScript is executed on the page it is loaded into. Remember that often a browser is going to read the HTML file from top to bottom. When it finds the <script> tag and then immediately load in and execute that JavaScript code (which is often why you see advice to load those scripts towards the end of the page). If the element with the ID you are trying to target is not yet read by the browser at the time it reads the JS (lets say your DIV is defined after your <script> tag) it may not yet see the element.

Now without having seen your HTML or your JavaScript and how you are bringing it in, it is hard to say what is going on. Can you show us the code of both your HTML and JS files so we can see why it might not be working?

2 Likes
3

Thankyou for the response!

Sidebar.JS file

const { BrowserWindow } = require("electron/main");

function Alert()
{
  window.alert('hello')
}
function moveIconsLeft()
{
    document.getElementById('btnReady').style.animation = "stateoverlayclose 0.45s ease 0s 1"
}

sidebar.html code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="sidebar.css">
<script type="module" src="commands.js"></script>



<title>Document</title>
</head>
<body>

<div class="sidebar">
<div class="notready-reasons">  
  <div style="display: grid; grid-template-columns: repeat(8,1fr); margin-left:-20px;  width:100px; text-align: center; color:#FFFFFF; height:60px;">
    <div id="btnReady" class="overlay-state" onclick="moveIconsLeft()" ><img src="" height="100%" width="100%"><span class="tooltiptext">Ready</span></div>
    <div id="btnNotReady" class="overlay-state" onclick="moveIconsLeft()" ><img src="" height="100%" width="100%"><span class="tooltiptext">Not Ready</span></div>
    <div id="btnBreak" class="overlay-state" onclick="moveIconsLeft() "><img src="" height="100%" width="100%"><span class="tooltiptext">Break</span></div>
    <div id="btnEmail" class="overlay-state" onclick=""><img src="" height="100%" width="100%"><span class="tooltiptext">Email</span></div>
    <div id="btnLunch" class="overlay-state" onclick=""><img src="" height="100%" width="100%"><span class="tooltiptext">Lunch</span></div>
    <div id="btnComfortBreak" class="overlay-state" onclick=""><img src="" height="100%" width="100%"><span class="tooltiptext">Comfort Break</span></div>
    <div id="btnMeeting" class="overlay-state" onclick=""><img src="" height="100%" width="100%"><span class="tooltiptext">Meeting</span></div>
    <div id="btnChat" class="overlay-state" onclick=""><img src="" height="100%" width="100%"><span class="tooltiptext">Web Chat</span></div>
  </div>

 </div>
 </div>
 <script src="sidebar.js"></script>
 </body>
 </html>

CSS code:

@keyframes stateoverlayclose {
from { opacity: 1; left: 10;}
to {opacity: 0; left: -700px;}
}

Index.js code where the sidebar.html code is being loaded into another window. Thought I’d include this as well, although i don’t think this is the problem.

function reasonsHorizontal() // horizontal version
{
  sidebar = new BrowserWindow({height:0, width:0, titleBarStyle: 'none', frame:false, resizable: false, backgroundColor: '#283243',  webPreferences: { nodeIntegration: true, 
    contextIsolation: false}})
    sidebar.loadFile('sidebar.html')
    sidebar.setPosition(0, 0, true)
    sidebar.setSize(1300, 100, true )
    sidebar.setPosition(0,100, true)
    sidebar.setMenuBarVisibility(false)
    sidebar.setAlwaysOnTop(true, 'floating') 
      
}

The alert function in the sidebar.js file is triggered no problem its only the moveIconsLeft() function which isn’t working which i don’t get either. The sidebar.css script is also being loaded into the html file with no issues, apart from the “stateoverlayclose” keyframe.

4

I’ve managed to fix it! i wasn’t specifying the type attribute in the script tag. Also i moved both script tags which contained the .js files in both html files towards the end of the body tag.

Thankyou for the advice :slight_smile:

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.