how to calling function from index to javascript - javascript

So I have simple problem. I need to use function from index.html to javascript.js ?
Here is function in index.html
<script> function SysActs() {}; </script>
Here is javascript.js
// here to i need add function
SysActs.prototype.GoToLayout = function (to)
{
if (this.runtime.isloading)
return;
if (this.runtime.changelayout)
return;
this.runtime.changelayout = to;
};

javascript.js:
function SysActs() {}
SysActs.prototype.GoToLayout = function (to) {
if (this.runtime.isloading) {return;}
if (this.runtime.changelayout) {return;}
this.runtime.changelayout = to;
};
index.html:
<script>
var s = new SysActs();
var to = whatever;
s.GoToLayout(to);
</script>

Just include the "javascript.js" in the html header
<script src="javascript.js"></script>

Related

Uncaught ReferenceError: AddAnime is not defined at HTMLInputElement.onclick (AnimeSite.html:51)

I'm making a quick site with a list and I can't call a function:
function:
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
function AddAnime() {
var newItem = document.getElementById("div")
newItem.innerHTML = document.getElementById("box").value;
newItem.onClick = removeItem;
document.getElementById("list").appendChild(newItem);
}
</script>
</head>
But when I call it with this:
<input type="button" value="Add Anime" onclick="AddAnime();">
By the way, this is line 51
the error comes up.
I don't know what to do.
You need to expose the function outside of the onload scope:
<script>
function AddAnime() {
var newItem = document.getElementById("div") newItem.innerHTML = document.getElementById("box").value;
newItem.onClick = removeItem;
document.getElementById("list").appendChild(newItem);
}
window.onload = function() {
AddAnime();
}
</script>

How do I include jQuery in my js file without html

I made a chrome extension where my popup button calls a script. The other script uses jQuery but I get an error saying jQuery is not defined.
My popup.html:
<!DOCTYPE html>
<html>
<head>
<title>HomAttendance</title>
</head>
<body>
<h1 style="color:#E54E4E">Hom<span style="color:#4E97E5">Attendance</span></h1>
<button type id="record" style="background-color:White"><h1 style="color:Black">Record Attendance</h1></button>
</body>
<script src="jquery-3.4.1.min.js"></script>
<script src="popup.js"></script>
</html>
My popup.js:
document.addEventListener('DOMContentLoaded', function() {
var login = document.getElementById('record');
login.addEventListener('click', function() {
chrome.tabs.executeScript({file: 'markStudents.js'});
});
});
myScript.js:
var arrays = []
$.get('Attendance.txt', function(data){
var splitted = data.split("\n"); // --> should return an array for each line
// Loop through all lines
for(var i = 0; i < splitted.length; i++)
{
var line = splitted[i];
// Now you could remove [ and ] from string
var removed = line.replace('[','').replace(']','');
var refined = removed.replace(' ', '');
// Now you can split all values by using , delimiter
var values = refined.split(',');
var array = [];
// Now you can iterate through all values and add them to your array
for(var c = 0; c < values.length; c++)
{
var value = values[c];
array.push(value);
}
arrays.push(array);
}
});
var present = arrays[0];
console.log(present);
var absent = arrays[1];
console.log(absent);
var user = present[0];
var pass = absent[0];
var loginField = document.getElementById('fieldAccount');
var passwordField = document.getElementById('fieldPassword');
loginField.value = user;
passwordField.value = pass;
var loginForm = document.getElementById('btn-enter-sign-in');
Is there any way to include my jquery.js in myScript.js?
Console Error
Just import jquery before you import popup.js
Like this
<!DOCTYPE html>
<html>
<head>
<title>HomAttendance</title>
</head>
<body>
<h1 style="color:#E54E4E">Hom<span style="color:#4E97E5">Attendance</span></h1>
<button type id="record" style="background-color:White"><h1 style="color:Black">Record Attendance</h1></button>
</body>
<script src="jquery-3.4.1.min.js"></script>
<script src="popup.js"></script>
</html>
Inside Your popup.js, when you load markStudents.js which uses jQuery, you'd again have to load jQuery before same
Like this
document.addEventListener('DOMContentLoaded', function () {
var login = document.getElementById('record');
login.addEventListener('click', function () {
chrome.tabs.executeScript(null, { file: "jquery-3.4.1.min.js" }, function () {
chrome.tabs.executeScript(null, { file: "markStudents.js" });
});
});
});
Just reorder your script tags and put jQuery before your popup.js. That way it will be loaded when you try to call it.
yo can use this code to include another jquery file in your jquery:
$.getScript("file address");
like this:
$.getScript("/assets/pages/scripts/ui-blockui.min.js");

My JS to retrieve querystring params isn't working, any ideas why?

I'm trying to get a simple example of using js to retrieve querystring params working and it's not (even though I said simple).
Here's my code:
I've tried putting alert statements in and debugging the old fashioned way but to be honest I'm used to using VS2017 for c# not js
Here's the code I'm using.
I have 2 html pages, the first just has a link:
try me
The second has the code:
this is some text <br />
<script> getparams2();</script>
this is some more text <br />
<script>
function getUrlParam(parameter, defaultvalue) {
var urlparameter = defaultvalue;
if (window.location.href.indexOf(parameter) > -1) {
urlparameter = getUrlVars()[parameter];
}
return urlparameter;
}
</script>
<script>
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
alert(value);
vars[key] = value;
});
return vars;
}
</script>
<script>
function getparams2()
{
var mytext = getUrlVars()["type"];
}
</script>
The result I'm trying to acheive is that the h1.html page can display the type parameter from the url.
Thanks in advance,
Paul.
Your code works. You just need to execute it when the document is ready also you need to return something or update your page to see the results.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<div id="params"> Printing The URL Params here</div>
<script type="text/javascript">
$( document ).ready(function() {
getparams2();
function getUrlParam(parameter, defaultvalue) {
var urlparameter = defaultvalue;
if (window.location.href.indexOf(parameter) > -1) {
urlparameter = getUrlVars()[parameter];
}
return urlparameter;
}
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function
(m, key, value) {
alert(value);
vars[key] = value;
});
return vars;
}
function getparams2()
{
var mytext = getUrlVars()["type"];
//console.log(mytext);
$('#params').text(mytext);
}
});
</script>
</body>
</html>
I would do it the following way:
URL-Param function
function getUrlParam(name){
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if (results == null) { return ""; }
else { return results[1]; }
};
Call from your getParams2
function getParams2(){
return getUrlParam('type');
};
getParams2 will return the value of the param if it is in the URL.

How to add local variables and a different function in script element in Javascript [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I need to create a script element as below,
<div class="abcd">
<script type="text/javascript">
var a = "10";
var b = "20";
(function(d) {
//lines of code of the function
}(document));
</script>
</div>
I have tried to complete these so by first creating a script element by document.Createelement option. and adding this script part into the div. But not able to add the code part within the script part.
Need to add both var code part and also the function.
Please help.
Thanks in advance
EDIT ----
I am using below code now,
var headtg = document.getElementsByTagName('head')[0];
var divElm = document.createElement('div');
var scpt = document.createElement('script');
scpt.type = 'text/javascript';
var clName= "TEST";
var myfunc = function innercode(i) {
var a = i;
var b = a;
(function (d) {
//codes
}(document));
}
divElm.className = "ABC_" + clName;
divElm.appendChild(scpt);
headtg.appendChild(divElm);
scpt.innerHTML = myfunc;
But the output coming up as
<div class="abcd">
<script type="text/javascript">
function innercode(zID){var a = "10";var b = "20";;
(function(d) {
//lines of code of the function
}(document));
</script>
</div>
But I want the output to be like,
<div class="abcd">
<script type="text/javascript">
var a = "10";
var b = "20";;
(function(d) {
//lines of code of the function
}(document));
</script>
</div>
Please advise
You can write your code like this :
<html>
<head>
<script>
var a = "10";
var b = "20";
function //here write you function name(d) {
//lines of code of the function
};
</script>
</head>
<body>
</body>
</html>
Or you can write at this way :
<html>
<body onload='write your javascript code here'>
</body>
</html>
i hope it will work.let me know.
i understand from you comment on my persevios answer you want to writer this code :
var headtg = document.getElementsByTagName('head')[0];
var divElm = document.createElement('div');
var scpt = document.createElement('script');
scpt.type = 'text/javascript';
var clName= "TEST";
divElm.className = "ABC_" + clName; divElm.appendChild(scpt);
headtg.appendChild(divElm);
function innercode(i) {
var a = i; var b = a;
}
function (d) {
//codes }(document));
}
if it is true you can write like this :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" >
var headtg = document.getElementsByTagName('head')[0];
var divElm = document.createElement('div');
var scpt = document.createElement('script');
scpt.type = 'text/javascript';
var clName= "TEST";
divElm.className = "ABC_" + clName; divElm.appendChild(scpt);
headtg.appendChild(divElm);
function innercode(i) {
var a = i; var b = a;
}
function (d) {
//codes }(document));
}
</script>
</head>
<body>
</body>
</html>
i hope it will work.let me know
You could just get the div element you want the code to be in, and then set the innerhtml to <script>your code here</script>
EDIT:
Try assigning your function like so:
var myFunc = function() {
//Code
}
Then you can call myFunc(parameters)

Javascript OnClick event

Here's a bit of code from a simple currency converter I'm building. The calculate() script runs fine, but the clear() code refuses to work and it appears the same??
US - CDN
Clear
<script type="text/javascript">
function clear() {
document.getElementById('us-cdn1').innerHTML = '';
}
</script>
<script type="text/javascript">
function calculate() {
var amount = parseFloat(document.getElementById("amount").value);
var result = document.getElementById("amount");
result.value = (amount).toFixed(2);
var result = document.getElementById("amount1");
result.value = (amount * .9861932938856016).toFixed(2);
document.getElementById('us-cdn').innerHTML = 'US';
document.getElementById('us-cdn1').innerHTML = 'CDN';
}
</script>
clear() is a public function. Change it into:
Clear
<script type="text/javascript">
function clearField() {
document.getElementById('us-cdn1').innerHTML = '';
}
</script>

Categories

Resources