I know how to replace text with getElementById() function in such situation:
<script type="text/javascript">
function go(){
var p = document.getElementById('ccc');
p.firstChild.nodeValue = 'AAA';
}
</script>
<div id='ccc'>o</div>
go
When I click on go link 'o' replaces on 'AAA'.
But I want to replace text when page loading to browser without any clicking. So user do not have to know that there was some text 'o' in div 'ccc'. He must see only 'AAA' from the beginning.
How to do that?
You can use the onload event:
window.onload = go;
// or better
window.addEventListener("load", go);
You can also use an anonymous function:
window.onload = function()
{
// ...
}
window.addEventListener("load", function()
{
// ...
});
use onload attribute like this:
<body onload="go()">
handle window.onload event, it fires up when the page loads.
<script type="text/javascript">
function doLoad() {
go1();
go2();
// ...
}
if ( window.addEventListener ) {
window.addEventListener( "load", doLoad, false );
}
else
if ( window.attachEvent ) {
window.attachEvent( "onload", doLoad );
} else
if ( window.onLoad ) {
window.onload = doLoad;
}
</script>
Alternatively you can just put your script at the bottom of the page, all elements will be loaded then.
<div id='ccc'>o</div>
<script type="text/javascript">
var p = document.getElementById('ccc');
p.firstChild.nodeValue = 'AAA';
</script>
Related
I have code like
if (windowURL.indexOf('example.com/w/') > -1 ) {
$('.wpd-login').css('display', 'none');
});
As you can see it relies on jQuery running to know whether or not to display it. There is only 1 page out of 100+ where I want this element hidden.
The problem is that I can see the 'hide' action happening as the page loads.
Is the only workaround for this hiding everything by default and then creating explicit conditions for 99% of the other pages where I do want to show that element? (Since it looks more normal for something to show than hide during load)
Or is there a solution?
You can try something like this:
I would also recommend using JS not JQuery for this, it will speed up everything.
document.onreadystatechange = function(e) {
if (document.readyState === 'complete') {
//dom is ready, window.onload fires later
document.querySelector("body").style.visibility = "hidden";
//hidde body
console.log(window.location.href);
if (window.location.href.indexOf('https://stacksnippets.net/js') > -1) {
document.querySelector(".wpd-login").style.display = "none";
//hide element
};
//show body with slight timeout
setTimeout(function(){ document.querySelector("body").style.visibility = "visible"; }, 200);
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="wpd-login">
.wpd-login
</div>
<div >
no .wpd-login
</div>
</body>
Or even try like this:
document.onreadystatechange = function(e) {
if (document.readyState === 'complete') {
//dom is ready, window.onload fires later
document.querySelector("body").style.visibility = "hidden";
//hidde body
console.log(window.location.href);
if (window.location.href.indexOf('https://stacksnippets.net/js') > -1) {
document.querySelector(".wpd-login").style.display = "none";
//hide element
};
}
};
window.onload = function(e) {
//document.readyState will be complete, it's one of the requirements for the window.onload event to be fired
//do stuff for when everything is loaded
document.querySelector("body").style.visibility = "visible";
//if it didnt work, use delay:
//setTimeout(function(){ document.querySelector("body").style.visibility = "visible"; }, 200);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="wpd-login">
.wpd-login
</div>
<div>
no .wpd-login
</div>
</body>
I have some variables in the following JS:
document.addEventListener('DOMContentLoaded', function (){
document.getElementById('btn4').addEventListener('click', getbg);
});
getbg = function()
{
chrome.runtime.getBackgroundPage(
function (bg) {
var allcompanynames = bg.companynames;
alert(allcompanynames)})
}
As you can see, the variable is "allcompanynames".
However, how do I pass them and show it on the popup.html page?
I have tried
<script type="text/javascript" src="companynames.js"></script>
<p id="allcompanynames"></p>
no luck. What's wrong?
document.addEventListener('DOMContentLoaded', function (){
document.getElementById('btn4').addEventListener('click', getbg);
});
getbg = function()
{
chrome.runtime.getBackgroundPage(
function (bg) {
var allcompanynames = bg.companynames;
alert(allcompanynames)})
document.getElementById("allcompanynames").innerHTML(allcompanynames)
}
I'm guessing you should add that last line after displaying the pop up to add the content into the page.
Write your code in this way
var background = chrome.extension.getBackgroundPage();
var allcompanynames = background.companynames;
alert(allcompanynames)
I can not seem to find the code to disable a javascript function. What I want to do is have a javascript function and then I want to disable it. Here is the code:
<script>
var fooFunc = function fooFunction() {
alert("HELLO");
};
$(document).ready(function() {
fooFunc.disable();
});
</script>
<button onclick="fooFunc()">Button</button>
Basically, when the button is click the function should not work, it should be disabled. Thanks
"Disabling" fooFunc is the same as setting it to an empty function (not to null--that will cause an error when it is called the next time). In this case:
$(document).ready(function() {
fooFunc = function() { };
});
But I don't see how this is different from simply removing the onclick handler from the HTML element.
If you want the ability to disable/re-enable the function, you can write it like this:
fooFunc = function() {
function _fooFunc() {
if (!enabled) return;
alert("HELLO");
}
var enabled = true;
_fooFunc.enable = function() { enabled = true; };
_fooFunc.disable = function() { enabled = false; };
return _fooFunc;
}();
If you want to extend this to allow any function to be enabled/disabled, you can write a higher-order function, which takes any function as a parameter, and returns a function with enable and disable methods attached to it:
function disablable(fn) {
function inner() {
if (!enabled) return;
fn();
}
var enabled = true;
inner.enable = function() { enabled = true; };
inner.disable = function() { enabled = false; };
return inner;
}
Now you can define fooFunc as
var fooFunc = disablable(function fooFunction() {
alert("HELLO");
});
and the rest of your code will work as you want.
You can access the onclick property of the element..
<button id="id" onclick="fooFunc()">Button</button>
<script>
document.querySelector('#id').onclick = '';
</script>
If you don't want the function to work at all and be totally disabled then use the below.
If you want the function to work only under certain conditions then you will need if/else statements so it will work only when the conditions that you have set are met.
$(document).ready(function(){
$("button").onclick(function(event){
event.preventDefault();
});
});
You were going to define it back to undefined or null.
fooFunc=undefined;
You Should be doing this :) Change function definition on very first run and you are good to go.
<! DOCTYPE html>
<html lang="en">
<body>
<script>
var fooFunc = function() {
alert("HELLO");
fooFunc = function(){};
};
var enablefooFunc = function()
{
fooFunc = function() {
alert("HELLO");
fooFunc = function(){};
};
}
</script>
<button onclick="fooFunc()">Run once and Disable FooFunc</button>
<button onclick="enablefooFunc()">Enable FooFunc</button>
</body>
</html>
Just learning jQuery and am using it to change the background image on a button triggered by a mouseover event. All of the console output fires at the correct times, but my image never changes. No errors are thrown. What am I doing wrong?
In the <head> element, I have this preloading script:
function preloader() {
if (document.images) {
console.log("preloading images");
contact_green = new Image();
contact_green.src = "http://www.xxxx.com/images/contact_green.png";
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(preloader);
That seems to work fine, in the sense that I get the output "preloading images". Not sure that it has the correct scope, however.
Then, in the <body> element, I have this button defined:
<td>
<button id='contact' class='CXIII' onclick="btnContact()">
<img id="logo" src="images/contact_blue.png">
</button>
</td>
Finally, I have a script that is supposed to change the image on this button upon a mouseover event:
<script>
function showHover(img) {
console.log("show hover");
if (img) img.src = contact_green;;
}
$("#contact").hover(
function () {
console.log("mouse in");
showHover(this);
},
function () {
console.log("mouse out");
}
);
</script>
I get the console output, but the image doesn't change. There are no errors thrown, either.
You are setting an object, not the source of the image
img.src = contact_green;;
needs to be
img.src = contact_green.src;
And you are not setting the image, but the button.
showHover(this);
needs to be
showHover($(this).find("img")[0]);
and since you are using jQuery
$(window).load(preloader);
Need to apply a var to a statement if its conditions are met, this syntax isn't throwing errors but its not working.
<script type="text/javascript">
$(document).ready(function(){
var action_is_post = false;
//stuff here
$(this).ready(function () {
if ($("#stepDesc0").is(".current")) {
action_is_post = true;
}
});
//stuff here
</script>
should I use something other than .ready? Do I even need the $(this).ready(function ()... part? I need it to apply the var when #stepDesc0 has the class current.
$(document).ready(function(){
var action_is_post = false;
$("form").submit(function () {
action_is_post = true;
});
if ($("#stepDesc0").is(".current")) {
var action_is_post = true;
}
window.onbeforeunload = confirmExit;
function confirmExit()
{
if (!action_is_post)
return 'Using the browsers back, refresh or close button will cause you to lose all form data. Please use the Next and Back buttons on the form.';
}
});
<script type="text/javascript">
$(document).ready(function(){
var action_is_post=$("#stepDesc0").is(".current");
});
</script>
If you want the variable to be accessible outside the $(document).ready(function(){..., then you'll need to declare it outside the statement like this:
<script type="text/javascript">
var action_is_post;
$(document).ready(function(){
action_is_post=$("#stepDesc0").is(".current");
});
</script>
HTML (in order to test it):
Show value
$(function() {
var actionIsPost = $('#stepDesc0').is('.current');
alert( actionIsPost );
});
If you are adding the current class to #stepDesc0 on an event then put the .is check in the event handler.