I running into an issue where after bundling my code Browserify I am getting a button not defined error. When using the original js file I created the function I had on the button click was partly working, so I don't think the issue is with that function per say.
To compile/bundle my code with Browserify I modified the "package.json" file and added ""build": "browserify Functions.js -o Test.js"" under the scripts section. Then from a terminal window "npm run build".
My HTML code is:
<!DCOTYPE html>
<HTML>
<head>
<meta name="viewport" content="width=device-width, initial scale=1.0">
<title>Content Search</title>
<!-- Linking styles sheet -->
<link rel="stylesheet" href="Styles.css">
<script type="text/javascript" src="Test.js"></script>
<!-- Links to the javascript file with all of the functions -->
<!-- <script type="text/javascript" src="functions.json"></script>
<script defer src="https://pyscript.net/alpha/pyscript.js"></script> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;600;700&display=swap" rel="stylesheet">
</head>
<header>
<H1>This Page is to designed to search Remedyforce, Jira, Confluence and Maxtrax</H1>
</header>
<body>
<div class="checkbox">
<label for="RF"> Search Remedyforce</label>
<input type="checkbox" id="RF" value="CheckRF">
<label for="Jira"> Search Jira</label>
<input type="checkbox" id="Jira" value="CheckJira">
<label for="Maxtrax"> Search Maxtrax</label>
<input type="checkbox" id="Maxtrax" value="CheckMaxtrax">
<label for="Network_Drive"> Search Network Drive</label>
<input type="checkbox" id="Network_Drive" value="CheckNetwork_Drive">
<label for="BitBucket"> Search BitBucket</label>
<input type="checkbox" id="BitBucket" value="BitBucket">
<br>
<br>
</div>
<textarea name="Search_Criteria" placeholder="Search" required></textarea>
<br>
<br>
<!-- onclick is used to call javascript function when button is clicked -->
<button id="Search" onclick="button()">Search</button>
<br>
<br>
<table id="Results">
<tr>
<td> Test</td>
<td> Test</td>
<td> Test</td>
<td> Test</td>
<td> Test</td>
</tr>
<tr>
<td> Test</td>
<td> Test</td>
<td> Test</td>
<td> Test</td>
<td> Test</td>
</tr>
</table>
</body>
<footer>
</footer>
</HTML>
My Functions.js file that I used to create my Test.js file has the following code:
const axios = require("axios");
const cheerio = require("cheerio");
const pretty = require("pretty");
const url = "https://pwdreset.exlservice.com/";
//Scrapes data from the URL that is specified in the URL variable
async function scrapeData() {
//Gets the data from the website (Raw HTML)
const { data } = await axios.get(url);
//loads the html into a doc
const $ = cheerio.load(data);
//console.log($.html());
//filters html based on the class name "project-logo"
const mango = $(".project-logo");
//prints out the information to the console
console.log(mango.html());
return mango.html;
}
function button () {
alert("You Clicked me");
var text;
//Makes the table that shows the results visable
document.getElementById("Results").style.display = "inline-block";
text = scrapeData();
document.getElementsByTagName("td").innerHTML = text;
}
Any help would be greatly appreciated!