Go to next page when True - javascript

JavaScript was created as follows: If the diction value is true, I want to go to another page, and if it is false, I want to let you go to Home. What should I do?
async function predict() {
// predict can take in an image, video or canvas html element
var image = document.getElementById("face-image")
const prediction = await model.predict(image, false);
prediction.sort((a,b) => parseFloat(b.probability) - parseFloat(a.probability));
switch (prediction[0].className){
case "True":
resultMessege = "성공"
break;
case "False":
resultMessege = "실패."
break;
default:
resultMessege = "알 수 없는 오류가 발생하였습니다. 다시 시도해보시길 바랍니다."
}
$('.result-message').html(resultMessege);

If redirecting to another page is, what you want to achive, then it is simpy this:
window.location.href = '/nextpage';

Related

Have image display on mouse over text, delay with hide or hide immediately if mouseover new text

So I have so an image will show when certain text is moused over, it will delay when the mouse is taken off before disappearing and that works just fine. But I have multiple images that can show up depending on the text hovered, I want to have the first image skip it's delay if other text is moused over so it doesn't expand the page and stack the images. Is this possible? Or will I just need to pull the delay off? This is done within JQuery
$("h2").mouseover(function ()
{
let mouseText = $(this).attr("class").split(" ")[0];
switch(mouseText)
{
case "wh-light":
imgID += mouseText;
break;
case "wh-hl-ll":
imgID += mouseText;
break;
case "part-hh-ll":
imgID += mouseText;
break;
}
$(imgID).show();
});
$("h2").mouseout(function ()
{
$(imgID).delay(1000).hide(0);
});
I can supply the HTML but I don't think it is too relevant to this. Thank you in advance for your help!
Without having your template and complete code, I'd have to contrive a full example... but the below snippet should give you a good example of what you'll have to do. You'll need to keep track of the current image and your callback has to know what the current image was when the delay was kicked off and compare it to the current to know whether it should do anything or not.
For this reason I pulled the code into separate javascript functions and used setTimeout instead of the jquery delay(). The documentation on the actual jquery site even mentions that the delay function is limited and has no way to cancel itself and as such should not be treated as a replacement for setTimeout().
Ref https://api.jquery.com/delay/
The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.
Without knowing how you were building the imgID variable or clearing it out... I added the baseImageID and targetImageID variables so that you don't end up just continuously concatenating the new strings onto the end of imgID...
As a last note... I like to make things very modular and verbose when talking through a solution so please dont hate on the extra functions... I think they make the solution easier to understand. The actual implementation can be streamlined...
let baseImageID = 'image-';
let targetImageID = '';
let currentImageID = '';
const hideImageNow = function(imageID) {
$(imageID).hide();
if (currentImageID == imageID) {
currentImageID = '';
}
};
const hideImageLater = function(imageID, delay) {
setTimeout(hideImageNow, delay, imageID);
};
const showImage = function(imageID) {
if (currentImageID != '') {
hideImageNow(currentImageID);
}
currentImageID = imageID;
$(imageID).show();
};
$("h2").mouseover(function() {
targetImageID = baseImageID;
let mouseText = $(this).attr("class").split(" ")[0];
switch (mouseText) {
case "wh-light":
targetImageID += mouseText;
break;
case "wh-hl-ll":
targetImageID += mouseText;
break;
case "part-hh-ll":
targetImageID += mouseText;
break;
}
showImage(targetImageID);
});
$("h2").mouseout(function() {
hideImageLater(currentImageID, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Making Javascript Code Deploy Ready

I need to make this code deploy ready. I can't hard code these URL's in but for some reason any other way of coding this, breaks. Reference this question here: Upon Redirect of Form Submission within iFrame jQuery Not Detecting Updated Src Attribute
I basically need to have the switch check if the location CONTAINS the page name after 'settings/' i.e. iframe-home.php, update.php, or changepassword.php. I think thats how i fix this issue? But i'm not sure how. (Hope that makes sense)
Here is the code:
$(document).ready(function() {
$('iframe#settings-iframe').on('load', function() {
var location = this.contentWindow.location.href;
console.log('location : ', location);
switch (location) {
case "http://localhost/Makoto/profile/settings/iframe-home.php":
console.log(location);
activateHome();
break;
case "http://localhost/Makoto/profile/settings/changepassword.php":
console.log(location);
activatePassword();
break;
case "http://localhost/Makoto/profile/settings/update.php":
console.log(location);
activateName();
break;
}
});
});
Note I assume that you want dynamically check path without host part.
Create new link element, set href to location, compare it to pathname
// replace with this.contentWindow.location.href
var url = "http://localhost/Makoto/profile/settings/iframe-home.php";
/**
* http://localhost/Makoto/profile/settings/iframe-home.php
* will return /Makoto/profile/settings/iframe-home.php
*/
var link = $('<a>', {
href: url
})[0].pathname;
var parts = link.split('/');
var file = parts[parts.length - 1];
console.log(file);
switch (file) {
case "iframe-home.php":
activateHome();
break;
case "changepassword.php":
activatePassword();
break;
case "update.php":
activateName();
break;
}
function activateHome() {console.log('Activating home');}
function activatePassword() {console.log('Activating password');}
function activateName() {console.log('Activating name');}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

localStorage, options data in selectmenu disappear when changing page

I have this code that writes entered phone numbers into defined options of a selectmenu, the problem is when i go back or quit the app the data are deleted and the list is empty. I can't find out why and how to fix this...
var flag_beneficiary_account_number=false;
var beneficiary_account_number;
if ( $('#beneficiary_number').val().length > 2 ) {
beneficiary_account_number=$('#beneficiary_number').val();
flag_beneficiary_account_number=true;
} else {
beneficiary_account_number = $('#Beneficiary_number_select').find(":selected").html();
flag_beneficiary_account_number=false;
}
if(flag_beneficiary_account_number){
if(localStorage.getItem("Beneficiary_number_select1")!=beneficiary_account_number &&
localStorage.getItem("Beneficiary_number_select2")!=beneficiary_account_number &&
localStorage.getItem("Beneficiary_number_select3")!=beneficiary_account_number){
var select_counter = parseInt(localStorage.getItem("select-counter"));
var select_option = select_counter%3;
select_counter = select_counter+1;
localStorage.setItem("select-counter",select_counter);
switch (select_option){
case 0:
localStorage.setItem("Beneficiary_number_select1",beneficiary_account_number);
$('#Beneficiary_number_select1').val(beneficiary_account_number);
$('#Beneficiary_number_select1').html(beneficiary_account_number);
break;
case 1:
localStorage.setItem("Beneficiary_number_select2",beneficiary_account_number);
$('#Beneficiary_number_select2').val(beneficiary_account_number);
$('#Beneficiary_number_select2').html(beneficiary_account_number);
break;
case 2:
localStorage.setItem("Beneficiary_number_select3",beneficiary_account_number);
$('#Beneficiary_number_select3').val(beneficiary_account_number);
$('#Beneficiary_number_select3').html(beneficiary_account_number);
break;
default:
break;
}
}
}
I was editing your question when you finally added the cordova tag. Things became clear so you need to remember that in cordova, to get the localStorage to work, use it this way
// To store
window.localStorage.setItem("Beneficiary_number_select2", beneficiary_account_number);
//and to access the value, use
window.localStorage.localStorage
.getItem("Beneficiary_number_select2");
instead localStorage.getItem("Beneficiary_number_select2")

Jssor refreshing .gif

I'm trying to load gif images into a jssor slider via code, but didn't work with my code and i don't know why.
The purpose is that each image refreshes when shown, cause the gif animation is not a loop, i have to do it this way.
Thanks in advance, here i put the code that is changing the images:
The variables wich will contain the images...
var imagen1 = new Image();
var imagen2 = new Image();
var imagen3 = new Image();
imagen1.src = "./1.gif";
imagen2.src = "./2.gif";
imagen3.src = "./3.gif";
And the code to change them...
function OnSlidePark(slideIndex, fromIndex) {
switch (slideIndex) {
case 0:
$('#i1').attr('src', imagen1.src);
break;
case 1:
$('#i2').attr('src', imagen2.src);
break;
case 2:
$('#i3').attr('src', imagen3.src);
break;
}
}
By the way, the sources and the Id's are working correctly
Will the following codes work?
function OnSlidePark(slideIndex, fromIndex) {
switch (slideIndex) {
case 0:
$('#i1').attr('src', '');
$('#i1').attr('src', imagen1.src);
break;
case 1:
$('#i2').attr('src', '');
$('#i2').attr('src', imagen2.src);
break;
case 2:
$('#i3').attr('src', '');
$('#i3').attr('src', imagen3.src);
break;
}
}

Outputting a picture based on a variable's number

I'm building a "game" where a user clicks on an image and a number is randomly generated. With this number an image is assigned and displayed. Essentially a Rock, Paper, Scissors game. I'm just trying to get the random image to display. However I'm confused as how to go about setting the variable and then displaying it.
Originally I tried creating a variable that inside the switch would be something as follows
case 1:
cpuChoice = <img id="rock" src="rock.jpg" name="rock" width="265" height="250" />
break;
And then do a $("#result").html(cpuChoice); (result being a div id) However I had no luck with that. Further research seemed to suggest I have to store images in a cache, which is what my code currently is set up for. Though I don't believe I'm understanding how to utilize it properly.
The images I'm using are stored in a file with the pages.
Below is an example of my current javascript page.
$(document).ready(function(){
var cpuImage = new Image();
rock.src = 'rock.jpg';
paper.src = 'paper.jpg';
scissors.src = 'scissors.jpg';
lizard.src = 'lizard.jpg';
spock.src = 'spock.jpg';
$("#paper").click(function(){
var ranNumberOne = 1 + Math.floor(Math.random() * 5);
// the switch is for assigning the image based on what number is generated
switch(ranNumberOne){
case 1:
document['rock'].src = rock.jpg;
break;
case 2:
document['paper'].src = paper.jpg;
break;
case 3:
document['scissors'].src = scissors.jpg;
break;
case 4:
document['spock'].src = spock.jpg;
break;
case 5:
document['rock'].src rock.jpg;
break;
}
document.['blank'].src =cpuImage.src;
});
blank is just the id of a temporary image I have. the code for it is as follows
<img id="blank" src="blank.jpg" name="blank" width="265" height="250" />
I've done alert's to make sure my onclicks and the random number generator are both working, which they are. It appears that my problem is just getting the image that "the computer picks" to show.
Ok. A few issues are happening here, all of which are solvable. So...
$(document).ready(function(){
// You don't need an image object, since you're only
// determining a string for `src` and applying it to an existing
// image object
var cpuImage = "";
/* Below you're assigning `src` properties to objects that don't exist. */
rock.src = 'rock.jpg';
paper.src = 'paper.jpg';
scissors.src = 'scissors.jpg';
lizard.src = 'lizard.jpg';
spock.src = 'spock.jpg';
/* I see what you're trying to do,
but try going about it a bit differently, example: */
var imageBank = {
'rock' : 'rock.jpg',
'paper' : 'paper.jpg',
'scissors' : 'scissors.jpg',
'lizard' : 'lizard.jpg',
'spock' : 'spock.jpg'
};
$("#paper").click(function(){
var ranNumberOne = 1 + Math.floor(Math.random() * 5);
// the switch is for assigning the image based on what number is generated
switch(ranNumberOne){
// Assign your 'cpuImage' variable to the associated imageBank key
case 1:
cpuImage = imageBank['rock'];
break;
case 2:
cpuImage = imageBank['paper'];
break;
case 3:
cpuImage = imageBank['scissors'];
break;
case 4:
cpuImage = imageBank['lizard'];
break;
case 5:
cpuImage = imageBank['spock'];
break;
}
// Old:
document.['blank'].src =cpuImage.src;
// JQuery syntax (assuming you have an image with id `blank`)
// New:
$("#blank").attr('src',cpuImage);
});
Keep in mind, using things like a dictionary AKA an object as an associative array (which the imageBank variable is) helps to include a bunch more information pertaining to rock, scissors, etc. in one easy-to-maintain place. You can add additional info as well, which will save you time and code in the future.
Hope this helps and best of luck!
In honor of Sheldon Cooper, this FIDDLE might help.
JS
$('.clickme').on('click', function(){
var randimage = Math.floor(Math.random() * 5) + 1;
$('.putmehere').html('');
$('.random1').html(randimage);
$('.holder img#i' + randimage).clone().appendTo('.putmehere');
});
html
<div id="container">
<img id="blank" src="blank.jpg" name="blank" width="265" height="250" />
</div>
js
$(function () {
$("#container")
.attr("data-name", $("img", this).attr("id"))
.on("click", function (e) {
var options = ["rock", "paper", "scissors", "lizard", "spock", "blank"];
var r = (function (n) {
return options[(n + Math.floor(Math.random() * options.length - n))]
})(1);
$("img", this).attr({
"id": r,
"name": r,
"src": r + ".jpg"
}).parent().attr("data-name", r);
});
});
jsfiddle http://jsfiddle.net/guest271314/e3EXs/

Categories