Add a button which calls a Content script function on click? - javascript

I have the follwing code in the content.js of Google Chrome extension:
jQuery(document).ready(function () {
jQuery("body").html('<input type="button" id="soso" value="asd" onclick="goFrame()" />');
});
function goFrame() {
alert('Value');
}
The button is created successfully, but when I click on it the message doesn't appear and I got the follwing error in the Google Chrome console:
Uncaught ReferenceError: goFrame is not defined

First read Chrome extension code vs Content scripts vs Injected scripts.
To solve the problem, get rid off the inline event listener, and bind the event dynamically:
...
var $input = $('<input type="button" id="soso" value="asd">').click(goFrame);
jQuery("body").html($input);
});
function goFrame() {
alert('Value');
}

Related

SharePoint 2013 JavaScript OnClick event

On our SharePoint 2013 page we have a button which runs an EXE
I want to generate a JS Alert when the button is clicked so that users know to click RUN
The buttons are being generated by a Content Search Web Part which is reading from a list with a Title and URL field.
For the EXE my url is this: file:///S:/Web/EmailSignature_WPF/EmailSignature_WPF.exe
I tried to embed the JavaScript inline using code such as: javascript:open('file:///S:/Web/EmailSignature_WPF/EmailSignature_WPF.exe') or more basically: JavaScript:alert('TEST');
But SharePoint is giving me an "Invalid URL" message when I try to embed JS in this manner.
I have instead now moved to a Script Editor Web Part and am trying to add the Alert to the OnClick event of my button but this is where I am stuck.
My Script Editor code:
<script style="javascript;">
var img = document.getElementById('ctl00_ctl40_g_a225dbb9_1900_49f2_afe2_ab6f5bf77adf_csr4_pictureOnTop_line1');
img.onclick="javascript:alert('event has been triggered')";</script>
Here is an image of the IE Debug screen which is how I'm pulling the ID. This H2 element is wrapped in an HREF which is wrapped in two DIV tags which make up an LI
With the above snippet IE Debug is giving me this error message:
Unable to set property 'onclick' of undefined or null reference
I am hoping that this is as simple as misplaced quotations, or assigning the OnClick event to the wrong element, but I'm spinning my wheels. Any help appreciated and I'm happy to clarify
You should associate a function to the onclick event on img
<script type="text/javascript">
var img = document.getElementById('ctl00_ctl40_g_a225dbb9_1900_49f2_afe2_ab6f5bf77adf_csr4_pictureOnTop_line1');
img.onclick = function () {
alert('event has been triggered');
};
</script>
Say that your page is in the SitePages library and you use jQuery, you can add it to a folder called "js" in the SiteAssets folder, then go back to your Script Editor WP and do it like this:
<script src="../SiteAssets/js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('input[id*="csr4_pictureOnTop_line1"]').on('click', function() {
alert('event has been triggered');
});
</script>

Onclick JS function call, returns "Can't find variable" only in Safari Console

So I have a very simple JS function written that works like the following.
There is a button that has the following code:
<button type="submit" class="large button" onclick="addCart(76,95,73,96);">
<i class="icon-shopping-cart"></i> Add to Cart
</button>
Now when that is clicked there is a very simple function added to the page below that looks like the following:
<script type="text/javascript">
function addCart(pid, pattr, pval, pscent = 0) {
...
}
</script>
This works perfectly in Chrome, Firefox, Chrome for Mobile, Safari for Mobile.
But this does not seem to work on Safari on Mac. Instead I get the following error:
ReferenceError: Can't find variable: addCart
I cannot figure out why. It's hard for me to add a listener because there are 7 buttons and a wide arrange of variables that are being sent, and I'd rather send that like I'm currently doing.
I finally found the issue.
The function was creating an error in Safari so it was never being defined. I changed the function to the following:
function addCart(pid, pattr, pval, pscent) {
pscent = (typeof pscent !== 'undefined') ? pscent : 0;
...
}
Notice the big difference is that I was no longer using the Function to declare a default value for 'pscent' and instead I do it the old school method. Not sure if this is being caused by an older version of Safari or what.
If you are here because of a similar error, look for some potential JS error in the function which will prevent the function from being declared.
Looks like you are submitting a form since the input type is "submit". Have you tried testing it with the input type set to "button"?
if you are using jquery try to use document ready function
$(document).ready(function() {
// code here
});
or use plain javascript self executing function here
(function() {
// your page initialization code here
// the DOM will be available here
})();
the possible reason is your function is not available at the time of click
Here is a sample (using jquery) https://jsfiddle.net/baphmoLt/

Catch22 - HTML waiting for JS, JS waiting for HTML

I'm a newbie trying to write a JS/HTML report generator based on criteria which I submit in an HTML form. The plan eventually is to use PHP/mySQL to manipulate a database and return results but for now I'm just trying to build the HTML/CSS/JS and I've got stuck. I have attributed a JS function to a button in the <body> like so:
<input type="button" id="reportButton" value="Generate Report" onclick="showCriteria()">
I included a script in the <head> as follows:
<script>var showCriteria = function(){ My JS code...}</script>.
This function simply does some date manipulation and displays the result in a div on the same page like so:
document.getElementById("endDate").innerHTML = "to "+endDay+" "+endMonthName+" "+endYear;
But I get Uncaught TypeError: Cannot set property 'innerHTML' of null. So I searched the forum and discovered that this can sometimes be caused by not waiting for the window to load. So I wrapped the script as follows:
<script>
window.onload = function()
var showCriteria = function(){ My JS code...}
That solved the initial error but I then get Uncaught ReferenceError: showCriteria is not defined
It seems like I'm in a Catch22. I get the first error because the script is running before the window has loaded. I fix that by waiting for the window to load only to find that the HTML is waiting for my script to define my JS function.
Any advice gratefully received.
Report Generator screenshot
Window.load script
You've almost got the solution. At least you've got all the right elements.
window.onload = function() {
document.getElementById('reportButton').addEventListener('click', showCriteria);
};
This will make it so the button does not function until the page is ready.
You also need to remove the onclick from the button.
When you put the showCriteria function inside window.onload, please make sure it is accessible by the DOM, i.e. window.showCriteria.
<script>
window.onload = function()
window.showCriteria = function(){ My JS code...}
...
Beside using onclick on html, you can use add listener to listen the click event on that element.
window.onload = function() {
document.getElementById('reportButton').addEventListener('click', showCriteria);
};

thymeleaf:external js file

i'm trying to use an external javascript file in a thymeleaf project so i've done the following:
this is how the file is declared(i put this just before /body as suggested in many other posts)
<script type="text/javascript" th:src="#{/resources/lor.js}"></script>
this is the html function call
<a id="l2" th:href="'javascript:change2();'">
and this is the js file
function change1() {
document.getElementById("l1").setAttribute("class", "selected");
document.getElementById("l2").setAttribute("class", "");
};
function change2() {
document.getElementById("l1").setAttribute("class", "");
document.getElementById("l2").setAttribute("class", "selected");
};
however i get the following error "Uncaught ReferenceError: change2 is not defined" from firebug.
i've also tried
function change2() {
document.getElementById("l1").className="";
document.getElementById("l2").className="selected";
};
and i'm getting "Uncaught TypeError: Cannot set property 'className' of null"
it seems like the js file is not even processed.any solution?
thanks in advance
I would suggest that you used an event handler instead of a function call on the href attribute.
So you may change your anchor link to this:
<a id="l2" href="javascript:void(0);">l2_Link</a>
To add a click event, you have to make use of the window.onload event as Rooster proposed.
window.onload = function (){
document.getElementById ("l2").addEventListener ("click", change2, false);
}
You can view a working example of this at: http://jsfiddle.net/RKSZ2/1/

Finding a running script for finding conflicts between javascripts

I have a form with some text boxes. I'm using bootstrap and I have a jquery plugin for form validation. My question is somehow some functions in bootstrap stopping the validation code from executing. This validation is written to onblur event and that code is in the same page with the form within <script> tags. I want to know that is there a way to find the running script on onblur event on google chrome developer tools.
Try jQuery Debugger for Chrome browser
If possible - give wep-page link
You can also override addEventListener(fiddle) and log then it calls:
function myEventListener(event, callback) {
console.log(this, event, callback);
this._addEventListener.apply(this, arguments);
}
HTMLElement.prototype._addEventListener = HTMLElement.prototype.addEventListener;
HTMLElement.prototype.addEventListener = myEventListener;
document.querySelector('input').addEventListener('blur', function () {
document.body.style.background = 'red';
});

Categories

Resources