js stops working when adding multple functions in same js file

Question

I run into a bug/problem when I try the following...

This is the HTML file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mathe einfach geübt</title>
    <link rel="stylesheet" type="text/css" href="CSS/mathElements.css">
  </head>
  <?php require("PHP/latex2htmlparser.php"); ?>
  <body>

<input type="text" id="tobeformatted" value="">

<button type="button" id="activatebutton" onclick='transform()'>Click Me!</button> <br><br>

<span id="formattedexpression">JavaScript can change HTML content.</span>

<script type="text/javascript" src="js/latex2htmlparser.js"></script>

And this the js

alert("done");

function transform() {
    document.getElementById("formattedexpression").innerHTML = "Paragraph changed.";
}

Until here it works (Alert happens and if the button is clicked the text changes)

but when I now add some more functions to the js file it stops working (no alert and no change of text:

alert("done");
function transform() {
    document.getElementById("formattedexpression").innerHTML = "Paragraph changed.";
}

function frac() {
    document.getElementById("formattedexpression").innerHTML = "Paragraph changed.";
}

function expo() {
    document.getElementById("formattedexpression").innerHTML = "Paragraph changed.";
}

function index() {
    document.getElementById("formattedexpression").innerHTML = "Paragraph changed.";
}

(the HTML is the same for both files)

Also I have noticed that there are some similar questions (Javascript stops working when I adapt another snippet inside and can more than one function be added in an external javascript file? i.e .js file?) around but they all got downvoted and closed and had no useful solution included. So if this question isn't asked clearly enough, please contact me and I will elaborate.

Yes, JS files can contain more than 1 function and there seems to be no issue with your code. Are you running this on some kind of server? Have you tried restarting your server so that changes are reflected? Also, try hard refresh on browser, which is usually or . — Harsh Gupta, Feb 04 '18 at 23:25

score 0 · Answer 1 · answered Feb 04 '18 at 23:25

If you put your code into a snippet, it works - see below.

So I suppose the error must be caused by this script which you are including:

<script type="text/javascript" src="js/latex2htmlparser.js"></script>

So I would search for errors there.

alert("done");
function transform() {
    document.getElementById("formattedexpression").innerHTML = "Paragraph changed.";
}

function frac() {
    document.getElementById("formattedexpression").innerHTML = "Paragraph changed.";
}

function expo() {
    document.getElementById("formattedexpression").innerHTML = "Paragraph changed.";
}

function index() {
    document.getElementById("formattedexpression").innerHTML = "Paragraph changed.";
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mathe einfach geübt</title>
    <link rel="stylesheet" type="text/css" href="CSS/mathElements.css">
  </head>
  <?php require("PHP/latex2htmlparser.php"); ?>
  
  <body>
  
<input type="text" id="tobeformatted" value="">

<button type="button" id="activatebutton" onclick='transform()'>Click Me!</button> <br><br>

<span id="formattedexpression">JavaScript can change HTML content.</span>


<script type="text/javascript" src="js/latex2htmlparser.js"></script>

</body>
</html>

js stops working when adding multple functions in same js file

1 Answers1