If i put some script in HTML file to change the animation play state,it's works.But when i put the script in a script file,it's not working.Can anyone tell me why?
script like this:
var buttons=document.getElementsByTagName("button");
for(var i=0;i<buttons.length;i++) {
console.log(buttons.length);
buttons[i].onclick=function(e) {
document.getElementById("para")
.style.WebkitAnimationPlayState=e.target.innerHTML;
};
}
The elements may not be defined in document. Try placing the existing script within load event handler of window
function toggleAnimationPlayState() {
var buttons=document.getElementsByTagName("button");
for(var i=0;i<buttons.length;i++) {
console.log(buttons.length);
buttons[i].onclick=function(e) {
document.getElementById("para")
.style.WebkitAnimationPlayState=e.target.innerHTML;
};
}
}
window.addEventListener("load", toggleAnimationPlayState);
Your script dependens on the existing of this Button :
=document.getElementsByTagName("button");
So,
it works because the script has been running after rendering the button .
It does not work because either :
Fail to import script. (check browser's console)
OR
Import the script BEFORE rendering the button .
Solution :
follow this order .
<button>....</button>
.......
<script src="/uri/of/script.js"></script>
OR, run your code inside onload listner of window
Related
is there a better way to replace this kind of js function by simply collapse/toggle a div and show/hide its content?
$(function() {
$('#destselect').change(function(){
$('.dest').hide();
$('#' + $(this).val()).show();
});
});
The reason this is happening is because your js file is called on the head of your page.
Because of this, when you document.getElementsByClassName('collapsible');, colls result in an empty array, as your elements in body are not yet created.
You could either create a separate js file and add it at the end of your body (in that way you make sure your colls are created when your javascript is executed), or just wrap your code on a DOMContentLoaded event listener that will trigger your code once the document has completely loaded.
My guess would be that you are loading your script before browser finishes loading dom conetent and so when it runs the elements it is trying to add event listeners to, don't yet exist.
Try wrapping all you javascript in that file in this:
document.addEventListener("DOMContentLoaded", function(event) {
// all your code goes here
});
The above makes sure that your script is run after loading all elements on the page.
You could add a script tag to the header of your HTML file, this will import the JS file into your current page as follows
<script src="File1.js" type="text/javascript"></script>
Then call the function either in onclick in a button or in another script (usually at the bottom) of your page. Something like this:
<body>
...
<script type="text/javascript">
functionFromFile1()
</script>
</body>
Seems like your script is not executing properly due to a missing variable.
In this script https://www.argentina-fly.com/js/scripts.js
Naves variable in function UpdateDetailsDestination() is not defined.
I think you should resolve this first and then check your further code is working on not.
Please take a look into Console when running page. You'll see all JavaScript related errors there.
i want create a focus on location "Molise, italy" when load a SVG map in my page http://goo.gl/0ZywjM
so i have created this simple script in jquery
<script>
jQuery('#path20684').click();
</script>
it work , but only after load the page and after insert this from chrome console , if insert this on footer not work because the svg file it not part of dom. how i can solve this, or have other solution ?
update it work only with this:
window.setInterval(function(){
jQuery('#path20684').click();
}, 1000);
but with this every second is clicked , so i think the problem is the script start before a SVG file is loaded, how solve ?
http://jsfiddle.net/CYhgZ/90/
please check the above link for demo
$(function() {
// when click event happens below code executed
$('path').on('click', function() {
alert("clicked")
});
//simulating click event automatically when page load
$('path').trigger("click");
//or
//$('path').click();
});
I create a web app that looks like this:
When i click the run model, i want that the form :"Dashbord", will open.
The JS code:
<script>
window.onload = function () {
function newDoc() {
window.location.href("#http://127.0.0.1:8100/#dashboard");
}
}
</script>
When The "Run Model" button onClick activate the function: newDoc().
The problem is: that in my URL path it is written: http://127.0.0.1:8100/#dashboard
but the 'Dashboard' form is not logged. it stays in the same page.
What should i do?
window.location.href is not a method, it's a property.
Try assigning it instead (also note, I removed the leading # character)...
window.location.href = "http://127.0.0.1:8100/#dashboard";
You also need to move your function outside of the window.onload event...
window.onload = function () {
}
function newDoc() {
window.location.href = "http://127.0.0.1:8100/#dashboard";
}
The onload event handler is generally only needed when you're dealing with specific elements on the page that won't be available until the page has finished loading.
By putting the newDoc within the onload event, you were effectively hiding it from being used directly by other events.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(
null, {file : "app.js"});
});
I am injecting a code like this to the extension on click. But I want to remove this injected code when the user clicks the extension Icon second time. How is it possible. The code Injects an html div with id "pluginHolder". I can manually remove it using the basic js code document.getElementById('pluginHolder').remove();.
How to do this process dynamically?
Thanks in advance
I think the simplest solution something like
if(document.getElementById('pluginHolder')) {
document.getElementById('pluginHolder').remove()
} else {
var pluginHolder = document.createElement('div');
document.body.appendChild(pluginHolder);
}
If you want to affect js code and not DOM.
you can use play with eventListener ,
function logMouse() {
console.log(e.x+':'+e.y);
}
// Initialize on first run to true else use old value NOT(!) ( last time injected script)
isEnable = isEnable ? !isEnable : !!isEnable;
if(isEnable) {
window.addEventListener('mousemove', logMouse);
} else {
window.removeEventListener('mousemove', logMouse);
}
I have a javascript function, "loadFramework()" that modifies an HTML document. Specifically, it repeatedly runs the jQuery command $("#element-id").load("document/name.html"), which injects the HTML in document/name.html directly into the element with #element-id.
Originally, I ran loadFramework() in a script in the document's header. However, since then I've realized that the function fails if the page has not loaded yet, since it relies on there being an element with #element-id.
I can't figure out how to get this function to run when it should. A simple solution seemed to be setting it to be the document.onload function:
document.onload = function() {
loadFramework();
}
But in this case it never seems to run at all.
How do I make sure a header function runs only after the document has loaded?
You should use window.onload if you are looking for a vanilla JS option
window.onload = function() {
loadFramework();
}
Jquery load takes additional argument "complete". You can run the javascript there. So the code would be:
$("#element-id").load("document/name.html", function(){
loadFramework();
});
You can also use $(document).ready(function{loadFramework()}) inside the html you are loading.
If you want to execute the loadFramework() method after "document/name.html" is loaded, I would suggest the following code.
$(function() {
$("#element-id").load("document/name.html", function(){
loadFramework();
});
});