I doing a little site for my web project, but I can't get the code to work. I have 4 "pages" (don't know what to call them) that I want to link to one another. You answer a question and an alert shows up redirecting you to the next page. I get the first link to work but not the other ones.
Here's my code:
<button data-href="../index.html" onclick="return confirm_alert(this);" class="knap3" >Nej</button>
This is what I used for the first link but it does not work when I have multiple of these in place. I tried giving them different tags/names but that didn't work.
function confirm_alert(element) {
redirect = confirm("confirmation for redirecting?");
if(redirect) {
window.location = element.dataset.href
}
Edit: When I put multiple of these in my buttons did not work anymore(nothing happends when I clicked on them).
(English isn't my native language so sorry for all the spelling errors.)
here is code that works
<button onclick="return confirm_alert('../index.html');" class="knap3" >Nej</button>
and
function confirm_alert(next) {
var msg="confirmation for redirecting?";
if(confirm(msg)) {
location.href=next;
}
}
here is a stand-alone page that works (i tested it), just save it to test.html and try it out. If this works, you can start building on it. if it does not, you have a separate issue that i cannot help with
<button onclick="return confirm_alert('../index.html');" class="knap3" >Nej</button>
<script>
function confirm_alert(next) {
var msg="confirmation for redirecting?";
if(confirm(msg)) {
location.href=next;
}
}
</script>
Related
Here's the issue:
Got multiple internal links on the web, still not connected to actual html files.
Im working with local files for the time being
Wanna make js redirect all of the dead links to one particular page (let's call the file: 404-error-page.html) up until I will finish the rest of html files to make those dead links active again
Purpose: wanna keep user away from seeing 404 blank page and instead show em some temporary page (404-error-page.html)
Sorry if that's messy - 1st time adding a question here.
HTML
<html><body><a href="random-link-directing-to-a-non-existing-page"></body></html>
JS
$('a').on('click', function(event) {
var $element = $(event.target);
var link = "404-error-page.html";
if(result.broken) {
if(result.http.response && ![undefined, 500].includes(result.http.response.statusCode)) {
event.preventDefault();
document.location.href = link;
}
}
});
I've already tried some alterations of this code but it's not working for me.
Firstly, need to make this functional on local files and then ofc online.
Any ideas?
Set the data-dead-link attribute to all your unfinished link tag as the follow.
Correct Link
<a data-dead-link>Dead Link</a>
<a data-dead-link>Dead Link</a>
Before the </body> tag insert the follow script
var deadLinks = document.querySelectorAll(`[data-dead-link]`)
deadLinks.forEach(el => {
el.href = "404-error-page.html"
})
I want to use intro.js with more than two pages.
Is it a simple way to do it?
Yes, you can. If you look at code for intro.js example with multiple pages https://github.com/usablica/intro.js/tree/master/example/multi-page you can see that first page has code that redirects to second page after user click the button:
<script type="text/javascript">
document.getElementById('startButton').onclick = function() {
introJs().setOption('doneLabel', 'Next page').start().oncomplete(function() {
window.location.href = 'second.html?multipage=true';
});
};
</script>
And on the second page we use regex to check if user is going through intro. You will need to add code like that to each page, with url address to the page that should be shown next.
If you want to have more than one "intro flows" (since the question title said multiple), you can give them names or numbers. Then, instead of adding multipage=true you can use multipage=beta_version or multipage=1 and use reqex to check if user should see intro, and if yes, which one.
<script type="text/javascript">
if (RegExp('multipage', 'gi').test(window.location.search)) {
document.getElementById('startButton').onclick = function() {
introJs().setOption('doneLabel', 'Next page')
.start().oncomplete(function() {
if (RegExp('multipage=2', 'gi').test(window.location.search)) {
window.location.href = 'third.html?multipage=2';
}
else {
window.location.href = 'unicorn.html?multipage=3';
}
});
};
}
</script>
That might be not the nicest code ever :), but ( like Rich said ) without more information I can only guess this is what you want to do? But hopefully, it will give a general idea.
if (RegExp('multipage', 'gi').test(window.location.search)) {
introJs().setOption('doneLabel', 'Next Page →').start().oncomplete(function() {
window.location.href = 'nextpage?multipage=true';
});
}
I was able to use intro.js for a complex multipage use (more complete than their official multipage example). See the issue I opened about it associated to my React solution on Codesandbox.
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'm building my new webcomics home on my website and have ran smack into a wall.
Here's what I want and what I've tried.
I'm trying to have something where using JavaScript I can make only the image of the comic change so that I do not have to make a new page for every single image. I don't mind having to do extra coding work as long as I don't have hundreds of pages in my directory.
I was going to have a /First Next Prev Last/ kind of navigation but I've been so frustrated with it that I kind of scrapped that idea for now and instead am thinking of having a list of the names + link of each comic below the image and just put that into a scroll box. Kinda like how Perry Bible Fellowship works.
I've been trying to figure out if maybe an array is the way to go as I have around 30 images so far and I will be updating daily. Honestly I don't even know if Javascript is the way to go either.
I've also tried to implement [this code](http://interestingwebs.blogspot.com/2012/09/change-image-onclick-with-javascript.html
) to see if it would work and it just seems to break as soon as I try to plug in my own stuff into it. Here's an example of my javascript butcher job:
<script language="javascript">
function Drpepper()
{
document.getElementById("image").src = "/comics/1DrPepper.jpg";
}
function Applestore()
{
document.getElementById("image").src = "/comics/2Applestore.jpg";
}
</script>
<p>
<img alt="Dr Pepper" src="1DrPepper.jpg"
style="height: 85px; width: 198px" id="image" /></p>
<p>
<input id="Button1" type="button" value="Dr Pepper" onclick="DrPepper()"/>
<input id="Button2" type="button" value="Apple Store" onclick="Applestore()" /></p>
Is there anyway to expand this for my purposes? What I would like is to not have buttons and just use links but I can't seem to get beyond this part here where the image doesn't even load and the buttons do nothing.
Also if there is some better way of doing this using any other method other than JavaScript, I'm more than open to it, except the aforementioned making hundreds of pages.
First off, consider using jQuery if you're going to go the Javascript route. Here's an example I mocked up for you:
// set up an array of comic images
var imgs = [
'http://dustinland.com/dlands/dland.sxsw.jpg',
'http://dustinland.com/dlands/dland.hipster.jpg',
'http://dustinland.com/dlands/dland.legalize.marijuana.jpg',
'http://dustinland.com/dlands/dland.TLDR.jpg'
],
// initialize current to 0
current = 0;
// define a function that returns the next item in the imgs array,
// or the first if we're already at the last one
function next() {
current++;
if (current >= imgs.length) current = 0;
return imgs[current];
}
// define a function to do the opposite of next()
function prev() {
current--;
if (current < 0) current = imgs.length - 1;
return imgs[current];
}
// define the first image in terms of a jquery object
var comic = $('<img/>').attr('src', imgs[0]);
// append to DOM
$('#comics').append(comic);
// click the prev button, get the previous image
$('#prev').on('click', function(){
comic.attr('src', prev());
});
// click the next button, get the next image
$('#next').on('click', function(){
comic.attr('src', next());
});
See this in action here: http://jsfiddle.net/QzWV5/
This may work fine for your application, but maybe you should consider the advice of #icktoofay; using Javascript will mean, at the very least, that Google won't automatically crawl all your images. This also presents a usability problem: do you want to force your users to click through every comic in order to reach the first? It's probably best if every image were reachable via its own URL, that way, anyone who came across your comic on the web could easily link to an individual comic.
Have you considered using Tumblr, Blogger, or Wordpress?
I have some form buttons
<input type="button" onclick="send_away('700302','update_item','0',2)" value="Change Quantity">
and they are calling the functions below: (different buttons call different functions from this script, which is embedded in the HTML file.
<script language="javascript" type="text/javascript">
function send_away(item_c,request_c,change_item_c,quantity_c){
form_c.item.value = item_c;
form_c.request.value = request_c;
form_c.change_item.value = change_item_c;
form_c.quantity.value = quantity_c;
form_c.submit();
}
//sends the form later
function later(){
address.incoming_address.value = 'l';
address.submit();
}
function address_now(){
form_c.incoming_address.value = 'n';
form_c.submit();
}
function remove_item(item_num){
form_c.removal.value = item_num;
form_c.submit();
}
</script>
The problem is, not one of these buttons works in firefox. They all work in every other browser I've tried.
Has anyone run into this kind of problem / know what I could be doing wrong? I've stared at it for a while and can't see anything, other than that my HTML doesn't validate very well, I don't have nearly time to fix all the validation problems though.
You can see the effect at http://www.terra-cotta-pendants.com/ - click a product and add it to cart - the buttons are on the cart page.
Thanks for any help.
add id="form_c" to your form and use document.getElementById('form_c') instead of just form_c
another option would be to access the form by using document.forms.form_c, but I have always preferred using id's