How would I access a javascript function within a html file

[aaron10500]

Hi I’m pretty new to working with javascript and html. I was wondering how i would go about accessing a javascript function within a html file.

So far I have included a script tag which has the src link to the commands.js file (this is within the head tag):

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

This is the function im trying to access in my html file which is inside of commands.js:

function placeCall(numberToCall)
{
  document.getElementById('btnPlaceCall').onclick()
  {
    alert("hello") //for testing purposes
    var postData = {NumberToCall: numberToCall};
    JSON.stringify(numberData);
    MakeRequest('placeCall', postData)

  };
}

Below is the code where I’m using an onClick function to access this method:

<div id="btnPlaceCall" class="standard-button" onclick="placeCall('078987876767')" onmouseenter="hoverMouseOver(event)" onmouseleave="hoverMouseLeave(event)">
            <img src="img/placecall.svg" height="100%" width="100%">
            <span class="tooltiptext">Place Call</span>
          </div>

This function is not being triggered, however if i include this function within the html file itself under a script tag it is being triggered. I dont want to do it this way as i have alot of other functions which i also need to access, and i feel that by taking this approach it would make my code really unorganised.

Can someone help!? thankyou!

[DaveMaxwell]

The reason is 99% the js file is not being found because the path is incorrect so double check it, As you’ve written this, the js is not in the same folder as the html file, which might be correct. You’re using a relative path to the js file. This means your html structure is assumed to be something like this (assuming the page calling this is in the root of your webserver, and is

• src
  • js
    • commands.js
• wwwroot
  • index.html

The easiest way would be to use the absolute path to the js file from the root, something like this. If your JS file can be found at www.example.com/src/js.commands.js, then use

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

[Gandalf]

Open the Inspector and click on the Console tab. Are there any errors reported?

[aaron10500]

I’ve checked the console and theres no errors appearing

[aaron10500]

it was in a JS folder, but what i’ve done now is move the commands.js file into the same folder as the index.html file and its still not triggering the function. I honestly have no idea what I’m doing wrong. I’ll post a picture of the folder structure.

[DaveMaxwell]

Wait a minute…

You’ve got conflicting behavior in your javascript. Your onclick method is adding an onclick event listener. No wonder it’s not working (how it works inline, dunno…)

You want either this

function placeCall(numberToCall)
{
    alert("hello") //for testing purposes
    var postData = {NumberToCall: numberToCall};
    JSON.stringify(numberData);
    MakeRequest('placeCall', postData);
}

<div id="btnPlaceCall" class="standard-button" onclick="placeCall('078987876767')" onmouseenter="hoverMouseOver(event)" onmouseleave="hoverMouseLeave(event)">
            <img src="img/placecall.svg" height="100%" width="100%">
            <span class="tooltiptext">Place Call</span>
          </div>

Or this (note the reversed placement - JS needs to be AFTER element is created, and a tweak to the markup)

<div id="btnPlaceCall" class="standard-button" onmouseenter="hoverMouseOver(event)" onmouseleave="hoverMouseLeave(event)" data-call="078987876767">
            <img src="img/placecall.svg" height="100%" width="100%">
            <span class="tooltiptext">Place Call</span>
          </div>

  document.getElementById('btnPlaceCall').onclick()
  {

    alert("hello") //for testing purposes
    const btn = document.querySelector('#btnPlaceCall')      // this is added to your code!  

    var postData = {NumberToCall: btn.dataset.call};  // this is change from your code!
    JSON.stringify(numberData);
    MakeRequest('placeCall', postData)

  };