Passing a variable as reference to javascript/jquery function - javascript

I have a function called pages and i want to pass a variable selectively by not repeating the code again, is this possible?
old code
<script>
var pages= (function() {
var config = {
$config1: $( '#block1'),
$config2: $( '#block-bottom1')
};
//more codes
})();
</script>
This was my attempt
<script>
var pages= (function(x) {
alert(x);
var config = {
$config1: $( '#block'+x),
$config2: $( '#block-bottom'+x)
};
//more codes
})();
</script>

You probably want this:
<script>
var pages = function(x) {
alert(x);
var config = {
$config1: $( '#block'+x),
$config2: $( '#block-bottom'+x)
};
//more codes
};
//Then you can call pages like this
var a = pages("page1");
var b = pages("page2");
</script>

Basically, your problem is that your funcion declaration is wrong, you just made an invocation instead. Leave out the parenthesis and use your function as normal afterwards, here an snippet demonstrating the concept:
<html>
<head>
<script>
var pages= (function(x) {
alert(x);
var config = {
$config1: $( '#block'+x),
$config2: $( '#block-bottom'+x)
};
//more codes
});
</script>
</head>
<body>
<input type="button" onclick="pages(1)"> button 1</input>
<input type="button" onclick="pages(2)"> button 2</input>
</body>
</html>

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");

Input that searches google

I am making a extension theme for my Chromebook that searches coding sites (like this site, w3schools, ect.) How sould I make it? This is my code so far:
<html>
<head>
</head>
<body>
<input id="input1">
<button onclick="searchGoogle()">Search Google</button>
<script>
function searchGoogle() {
var one = document.getElementById("input1").value;
var two = 'http://www.google.com/search?q=' + one;
window.location = two;
}
</script>
</body>
</html>
My code doesn't work
When it runs, this pops up:
(Image of my code running)
Is my code wrong?
Any help will be aapreciated.
EDIT
<html>
<head>
<script src="searchgoogle.js">
</script>
</head>
<body>
<input id="input1">
<button id="link">Search Google</button>
</body>
</html>
and
document.addEventListener('DOMContentLoaded', function() {
var link = document.getElementById('link');
// onClick's logic below:
link.addEventListener('click', function() {
function searchGoogle() {
var one = document.getElementById("input1").value;
var two = 'https://www.google.com/search?q=' + one;
window.location = two;
}
});
});
Didn't work either
You declare the function searchGoogle inside the listener function but it is never called. Try with:
document.addEventListener('DOMContentLoaded', function() {
var link = document.getElementById('link');
// onClick's logic below:
link.addEventListener('click', function() {
//there is no need to declare a new function here.
var one = document.getElementById("input1").value;
var two = 'https://www.google.com/search?q=' + encodeURIComponent(one);
window.location = two;
});
});

javascript select variable in HTML script tag

Rookie question. (Possible duplicate?)
Can I directly select a variable (globalSurveyPackageData) in HTML script tag, as in the screenshot below?
Globals are available through out the page. So yours should be there to select.
alert(myVar1);
alert(myVar2);
alert(myVar30);
alert(myVar400);
<script>
var myVar1 = 'one';
</script>
<script>
var myVar2 = 2;
</script>
<script>
var myVar30 = [10,20,30,40,50];
</script>
<script>
var myVar400 = {
one: myVar1,
two: myVar2,
three: function(){ return 3;}
};
</script>
In the screenshot you are setting globalSurveyPackageData in the global scope.

Access array value from function

I simply want to access the value of array status from another function. However, the alert is giving me value as undefined. Here's my code:
Test.php:
<html>
<body>
<script>
var status=[];
status[0]='1';
calculateInput();
function calculateInput(){
alert(status[0]);
}
</script>
</body>
</html>
You are colliding with window.status:
function calculateInput () {
alert( status === window.status ); // true
}
To avoid this, rename your array or get out of the global scope:
(function IIFE () {
var status = [];
status[0] = "1";
calculateInput();
function calculateInput () {
alert( status[0] );
}
}());
Change your variable name from status to something else
ex.
<html>
<body>
<script>
var mystatus=[];
mystatus[0]='1';
calculateInput();
function calculateInput(){
alert(mystatus[0]);
}
</script>
</body>
</html>

Categories

Resources