I need a button to change it's URL to match that of the iframe that is presented on the screen the problem I face here is how can I change the URL of the button with JavaScript?
Here is what I have as of now:
<button id="t7"onclick="t7()">Full Pilot</button><br>
function f0() {document.getElementById('i').src="https://pilot.wright.edu/d2l/home";}
function f1() {document.getElementById('i').src="https://pilot.wright.edu/d2l/home/159483";}
function f2() {document.getElementById('i').src="https://pilot.wright.edu/d2l/le/content/219408/Home";}
function f3() {document.getElementById('i').src="https://pilot.wright.edu/d2l/home/159465";}
function f4() {document.getElementById('i').src="https://pilot.wright.edu/d2l/home/219301";}
function f5() {document.getElementById('i').src="https://pilot.wright.edu/d2l/home/159463";}
the functions f0 - f5 are the buttons that I need to have change the URL of the button listed at very first line of code. can any one point me in the direction of which I can do this or even some ideas as to how I can go about doing this.
Here is one thing I have tried:
function t7() {window.open("document.getElementById("i").src="");}
first, button should have "type" attributes, Different browsers may have different default value for button element.
second, button don't have src attribute, so you can't change the src of the button, try using <a> instead.
third, iframe support onload event, which will be fired after the iframe is loaded.
so this is probably what you want
<iframe src="http://www.mysite.com" onload="iload(this)"></iframe>
Full Pivot
<script>
function iload(obj) {
document.getElementById("t7").href = obj.src;
}
</script>
UPDATE: no href method
<iframe src="http://www.mysite.com" onload="iload(this)"></iframe>
<button type="button" id="t7">Full Pivot</a>
<script>
function iload(obj) {
document.getElementById("t7").onclick = function() {
window.location.href=obj.src;
}
}
</script>
alternatively, a shorter approach.
<iframe src="http://www.mysite.com" id="the_iframe"></iframe>
<button type="button" onclick="iload">Full Pivot</a>
<script>
function iload() {
window.location.href=document.getElementById("the_iframe").src;
}
</script>
Try document.getElementById('t7').onclick="..."; to change the "url."
JavaScript:
first button press:
function f0(){document.getElementById('i').src="https://pilot.wright.edu/d2l/home";document.getElementById('o').innerHTML="https://pilot.wright.edu/d2l/home"}
HTML:
<p id="o">https://pilot.wright.edu/d2l/home</p>
solution:
function t7() {window.open(document.getElementById('o').innerHTML);}
I basically just added a paragraph node and shared the URL to the button's innerHTML
Thank you to all who answered
Related
When the user clicks read more, I want the page to change to the new page (News.html) and then scroll down a specific amount so that it lines up with the article, but what's happening is that when you click read more, the page lowers a specific amount and then changes to the top of the news.html page
<article>
<h3>Is Joe Hart right for Torino?</h3>
<img src = "News_Images/Joe_Hart_Torino.jpg" alt = "Joe" width="225" height="150">
<button class = "btn btn-block btn-primary" onclick ="Change(); scrollWin();">
<p>Read</p>
</button>
</article>
<script>
function Change(){
document.location.href = "News.html";
}
</script>
<script>
function scrollWin() {
window.scrollBy(100, 175);
}
</script>
You can use fragment for instance #content. Put in appropriate place on the
News.html page and update your function to something like
function Change(){
document.location.href = "News.html#content";
}
Btw when you click only one onclick event occurs it's not supposed to occur multiple events and in your case both functions are executed, just moving takes time and you see scrolling first. Using scroll with hardcoded value is not good idea, you'll need to update it every time you update content of News.html
**UPDATE**
procrastinator is right, see comment below, just use anchor if it's applicable for you.
When you move to another page, javascript reloads and does not continue execution from where you left off.
A solution to your problem could be using a request parameter.
Change your function to this:
function Change(){
document.location.href = "News.html?scroll=yes";
}
And in your News.html page, add this code to the page's onload event:
var url = new URL(window.location.href);
var param = url.searchParams.get("scroll");
if (param == "yes")
window.scrollBy(100, 175);
I have a website where there is a side menu filled with links. On top of that are some Next and Prev buttons for the user to switch between the menus of links.
I want to change this so that the menu will automatically change after x amount of time.
I thought something like this would do it:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function delayer(){
window.location = "http://www.google.com" }
</script>
</head>
<body onLoad="setTimeout('delayer()', 1000)">
</body>
</html>
Basically, instead of opening google, I want the page to run the "Next" button which is represented by:
<div class="navBtns mar9 s3">
<span></span>
<span></span>
</div>
Any idea on how to do this? Thanks!!
If you'd like to "click" the next button, then you can do that programatically with JS.
var nextbutton = document.getElementsByClassName('next');
nextbutton.click();
Getting element by class like that only works on post-IE8 browsers.
<span></span>
This hyperlink does nothing by itself. Somewhere on the site, there is a javascript function bound to the click event of this link. You need to either trigger a click event on the link, or call the javascript directly.
Without seeing the rest of the javascript / knowing what frameworks are in use on the page, it's impossible to give a more precise answer.
-- EDIT --
Based on your comment, you may be able to do something along these lines:
<script type="text/javascript">
setTimeout(function() {
$('#page_HOME .slider .next').click();
}, 1000);
</script>
As long as those hyperlinks are contained inside the slider element, the above code will trigger a change in your side menu after 1000 milliseconds
You could find the HREF of the link you want based on the class name of the link, using plain old JS.
window.location = document.querySelector(<link class name>).getAttribute("href");
This will redirect the browser to whatever the href attribute is set to.
If you wanted to keep a function like you have, you could use this:
function delay(link, time) {
setTimeout(function() {
window.location = document.querySelector("." + linkClass).getAttribute("href");
}, time);
}
Then to use it, just say:
delay("next", 5000); // go to the href of the link with the class "next" after 5 seconds.
I am still new to javascript.
I have an application that has two buttons on the page. One is a cpu_vs_player button that displays one game and the other is a player_vs_player button that displays a different game. The problem is that all the code is located in one application.js file. There is no need to load the player_vs_player on $(document).ready(function(){}); if I were to play cpu_vs_player.
Any ideas on how I can get them to load only if I chose that game? (I am only using one route with all the information being hidden / shown based on the click).
The document.ready is nothing more than the moment after the page has rendered and the document needs to be populated with event listeners. Frankly there are multiple way of skinning this cat.
You can either do the jQuery way where you keep javascript and HTML divided:
<button id="button1">cpu_vs_player</button>
<button id="button2">player_vs_player</button>
And for JavaScript:
Assuming you have a function for each gameplay:
function cpu_vs_player() {
// start the game
}
function player_vs_player() {
// need another player
}
Add event listeners the jQuery way:
$(document).ready(function() {
$("#button1").click(function() {
cpu_vs_player();
});
$("#button1").click(function() {
player_vs_player();
});
});
OR you could use the method #Techstone shows you, though you could do it more direct. It all works though.
<button onclick="javascript:cpu_vs_player();">cpu_vs_player</button>
<button onclick="javascript:player_vs_player();">player_vs_player</button>
Adding another option you can apply
In Javascript:
var Main = {
cpu_vs_player: function() {
alert("start cpu_vs_player");
},
player_vs_player: function() {
alert("start player_vs_player");
}
}
In your HTML:
<button onclick="javascript:Main.cpu_vs_player();">cpu_vs_player</button>
<button onclick="javascript:Main.player_vs_player();">player_vs_player</button>
And yes, there is more ... ;-)
image that your two button and js definition like below
function LetsRock(Playmate) {
....
}
<input type='button' value='cpu_vs_player' id='cpu_vs_player' onclick='javascript:LetsRock(this.id);' />
<input type='button' value='player_vs_player' id='player_vs_player' onclick='javascript:LetsRock(this.id);' />
Try to use the function with parameters (i.e. 0 to cpu v/s player, 1 to player v/s player), and send from the menu page to the $(document).ready(function(){});
I am programming a sudoku puzzle (http://www.jsfiddle.net/sZ7Aq/4/). It works okay on IE, but when I try it on Google Chrome, the button doesn't do anything when I click on it. Is there a way to fix it so it works on all browsers?
Please note: I haven't finished it so there isn't a puzzle generating function. You must enter all numbers yourself.
Here is my main() function (if you did not click on the link yet):
function main() {
getcellVal();
if (validate() == false) {
alert("Something's not right!");
return false;
}
alert("Good job!");
return true;
}
My button:
<button onclick="javascript: main()">Check my answer</button>
Use .addEventListener('click', main); For instance:
var check = document.getElementById('check');
check.addEventListener('click', main);
and of course add id="main" and remove the onclick from your button.
Updated fiddle
Then open your console and fix the other bugs...
From your jsfiddle, the error is in your getcellValue() function. This code is incorrect:
colVal = [[x0y0.value, x0y1.value, x0y2.value, x0y3.value, x0y4.value, x0y5.value, x0y6.value, x0y7.value, x0y8.value],
I would suggest you change your input elements to have an id attribute that matches the name. Like this:
<input type="text" name="x0y0" id="x0y0">
Then change your getcellVal() function to use the getElementById function.
colVal = [[document.getElementById("x0y0").value, ...],
It will be much more verbose, but it will work in more browsers.
Few things need to be corrected:
Instead of defining an event such as javascript: main() inline, use unobtrusive solution to register the necessary event handlers programmatically.
Eg:
<button id="buttonid">Check my answer</button>
window.onload = function() {
document.getElementById('buttonid').onclick = main;
};
You cannot access the DOM elements just by specifying their names. In your case x0y0.value will not return anything. Instead use id or class name to access the set of elements.
Eg:
<input type="text" name="x0y0" id="x0y0">
In javascript,
document.getElementById("x0y0").value
I am trying to make a click event with Javascript on this image button
<input type="image" alt="Skip" name="bt_cancel" id="bt_cancel"
src="http://images.eversave.com/Images/optin/skip_button_092106.gif"
onclick="return handleSubmit(this);">
I am trying to use it in Chrome but it doesn't respond when I load the page.
I am using the following code:
if((window.location.hostname == "eversave.com")){
window.onload = function() {
document.getElementById("bt_cancel").click();
}
}
your code works absolutely fine, I think the problem is in the host name check. alert it to find out what it really is, like this: http://jsfiddle.net/AvgME/
<input type="image" alt="Skip" name="bt_cancel" id="bt_cancel"
src="http://images.eversave.com/Images/optin/skip_button_092106.gif"
onclick="return handleSubmit(this);">
<script>
if((window.location.hostname != "eversave.com")){
window.onload = function() {
document.getElementById("bt_cancel").click();
}
}
function handleSubmit(f) {
alert(window.location.hostname);
}
</script>
I think using jQuery is in your case a good option.
The code would than look like:
$(document).ready(function(){
$('#bt_cancel').click(function(){
// do some stuff with it like:
alert($(this).attr('src'));
});
});
You could just call the function:
handleSubmit(document.getElementById("bt_cancel"));
Btw. returning the value in the image click handler has no effect. There is no default action associated with clicking on images.
If the element is in the DOM on page-load, you can use this in the head of the document, otherwise put it after the </body> tag:
<script type="text/javascript">
var image = document.getElementByID('bt_cancel');
image.onclick = function(){
handlesubmit(this);
};
</script>
Though in all fairness, I think I prefer #Felix Kling's answer.