I have an html page (http://www.autoelettric.com/info/SafeConversionToLed.html) that when I click on button the status bar on top will change.
The site would be designed for easy navigation through the buttons, but if an user uses the scroll, the status bar is not updated. So I would like to know if can I do an event that updates the status bar on the change of url (httt.url.com # step1, httt.url.com # step2, httt.url.com # step3).
For example, my code now:
Script:
<script type = "text/javascript">
function status0()
{
document.getElementById("imgStausBar").src ="status0.png";
}
function status1()
{
document.getElementById("imgStausBar").src ="status1.png";
}
function status2()
{
document.getElementById("imgStausBar").src ="status2.png";
}
function status3()
{
document.getElementById("imgStausBar").src ="status3.png";
}
</script>
Html
<div class="btn-5" width="50px">↓ START</div>
<div class="btn-5" width="50px">→ YES</div>
<div class="btn-5-previous" width="50px">↩ PREVIOUS</div>
<div class="btn-5-top" width="10px">↑</div>
What I would do:
if current url is #SafeConversion do status0()
if current url is #FlasherUnit do status1()
if current url is #ExactPower do status2()
etc...
EDIT:
I added this, but it doesn't work.
if ("onhashchange" in window) { // event supported?
window.onhashchange = function () {
hashChanged(window.location.hash);
}
}
else {
var locationHash = window.location.hash;
window.setInterval(function () {
if(locationHash == "#SafeConversion") {
status0();
} else if(locationHash == "#FlasherUnit") {
status1();
} else if(locationHash == "#ExactPower") {
status2();
} else if(locationHash == "#ExactPower") {
status2();
} else if(locationHash == "#YourSolution") {
status3();
} else if(locationHash == "#YourSolution2") {
status3();
} else if(locationHash == "#YourSolution2/1") {
status3();
} else if(locationHash == "#YourSolution3") {
status3();
} else if(locationHash == "#YourSolution3/1") {
status3();
} else if(locationHash == "#YourSolution4") {
status3();
} else if(locationHash == "#Contact") {
status0();
}
}, 100);
}
Something like this should work:
<script type="text/javascript">
function hashChanged(locationHash) {
if(locationHash == "#SafeConversion") {
status0();
} else if(locationHash == "#FlasherUnit") {
status1();
} else if(locationHash == "#ExactPower") {
status2();
} else if(locationHash == "#ExactPower") {
status2();
} else if(locationHash == "#YourSolution") {
status3();
} else if(locationHash == "#YourSolution2") {
status3();
} else if(locationHash == "#YourSolution2/1") {
status3();
} else if(locationHash == "#YourSolution3") {
status3();
} else if(locationHash == "#YourSolution3/1") {
status3();
} else if(locationHash == "#YourSolution4") {
status3();
} else if(locationHash == "#Contact") {
status0();
}
}
if ("onhashchange" in window) { // event supported?
window.onhashchange = function () {
hashChanged(window.location.hash);
}
}
else { // event not supported:
var storedHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != storedHash) {
storedHash = window.location.hash;
hashChanged(storedHash);
}
}, 100);
}
</script>
If you mean the url, when you said status bar, i tried it and the status bar updated when i scroll-up or down.
use "window.location.hash"
var locationHash = window.location.hash;
if(locationHash == "#SafeConversion") {
status0();
} else if(locationHash == "#FlasherUnit") {
status1()
}
and so on....
Related
The following code works; however, my issue is that sometimes when the page is loaded in incognito, I have to load the page twice for the total cost to display the correct value.
When it fails, the cost displays 0.
Desired outcome: I need the correct amount to display each time someone loads the page.
jQuery(".modal").delay(1000).fadeIn();
jQuery('#ip').delay(3000).fadeIn();
jQuery(".close").click(function() {
jQuery(".modal").hide();
});
jQuery(document).ready(function() {
jQuery('.tos').on('scroll', chk_scroll);
});
// Check to See if User Scrolls to The Bottom of Terms of Service in Modal
function chk_scroll(e) {
var elem = jQuery(e.currentTarget);
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
console.log("bottom");
jQuery('.continue-btn').fadeIn("slow");
}
}
jQuery(".continue-btn").click(function() {
var agree = true;
jQuery(".modal").hide();
});
jQuery.get("https://ipinfo.io", function(response) {
jQuery("#ip").html(response.ip);
var ipaddress = response.ip;
var countryid = response.country;
var cityloc = response.city;
jQuery("#city-value").html(response.city);
jQuery("#country-value").html(response.country);
// jQuery("#details").html(JSON.stringify(response, null, 4));
// Determine User's Country
if (response.country == 'US') {
jQuery("#input_1_15").val("United States|245");
} else if (response.country == 'CA') {
jQuery("#input_1_15").val("Canada|245");
} else if (response.country == 'AD') {
jQuery("#input_1_15").val("Andorra|245");
} else if (response.country == 'AT') {
jQuery("#input_1_15").val("Austria|245");
} else if (response.country == 'BH') {
jQuery("#input_1_15").val("Bahrain|245");
} else if (response.country == 'BE') {
jQuery("#input_1_15").val("Belgium|245");
} else if (response.country == 'CY') {
jQuery("#input_1_15").val("Cyprus|245");
} else if (response.country == 'DK') {
jQuery("#input_1_15").val("Denmark|245");
} else if (response.country == 'FI') {
jQuery("#input_1_15").val("Finland|245");
} else if (response.country == 'FR') {
jQuery("#input_1_15").val("France|245");
} else if (response.country == 'DE') {
jQuery("#input_1_15").val("Germany|245");
} else if (response.country == 'IS') {
jQuery("#input_1_15").val("Iceland|245");
} else if (response.country == 'IE') {
jQuery("#input_1_15").val("Ireland|245");
} else if (response.country == 'IL') {
jQuery("#input_1_15").val("Israel|245");
} else if (response.country == 'JP') {
jQuery("#input_1_15").val("Japan|245");
} else if (response.country == 'KW') {
jQuery("#input_1_15").val("Kuwait|245");
} else if (response.country == 'LI') {
jQuery("#input_1_15").val("Liechtenstein|245");
} else if (response.country == 'LU') {
jQuery("#input_1_15").val("Luxembourg|245");
} else if (response.country == 'MC') {
jQuery("#input_1_15").val("Monaco|245");
} else if (response.country == 'NL') {
jQuery("#input_1_15").val("Netherlands|245");
} else if (response.country == 'NO') {
jQuery("#input_1_15").val("Norway|245");
} else if (response.country == 'OM') {
jQuery("#input_1_15").val("Oman|245");
} else if (response.country == 'QA') {
jQuery("#input_1_15").val("Qatar|245");
} else if (response.country == 'ES') {
jQuery("#input_1_15").val("Spain|245");
} else if (response.country == 'SE') {
jQuery("#input_1_15").val("Sweden|245");
} else if (response.country == 'CH') {
jQuery("#input_1_15").val("Switzerland|245");
} else if (response.country == 'GB') {
jQuery("#input_1_15").val("United Kingdom|245");
} else if (response.country == 'BN') {
jQuery("#input_1_15").val("Brunei|245");
} else if (response.country == 'NZ') {
jQuery("#input_1_15").val("New Zealand|245");
} else if (response.country == 'AE') {
jQuery("#input_1_15").val("United Arab Emirates|245");
} else if (response.country == 'AU') {
jQuery("#input_1_15").val("Australia|245");
} else if (response.country == 'BB') {
jQuery("#input_1_15").val("Barbados|245");
} else if (response.country == 'HR') {
jQuery("#input_1_15").val("Croatia|245");
} else if (response.country == 'EE') {
jQuery("#input_1_15").val("Estonia|245");
} else if (response.country == 'GR') {
jQuery("#input_1_15").val("Greece|245");
} else if (response.country == 'IT') {
jQuery("#input_1_15").val("Italy|245");
} else if (response.country == 'HU') {
jQuery("#input_1_15").val("Hungary|245");
} else if (response.country == 'JO') {
jQuery("#input_1_15").val("Jordan|245");
} else if (response.country == 'KZ') {
jQuery("#input_1_15").val("Kazakhstan|245");
} else if (response.country == 'LV') {
jQuery("#input_1_15").val("Latvia|245");
} else if (response.country == 'LT') {
jQuery("#input_1_15").val("Lithuania|245");
} else if (response.country == 'MT') {
jQuery("#input_1_15").val("Malta|245");
} else if (response.country == 'PL') {
jQuery("#input_1_15").val("Poland|245");
} else if (response.country == 'PT') {
jQuery("#input_1_15").val("Portugal|245");
} else if (response.country == 'RO') {
jQuery("#input_1_15").val("Romania|245");
} else if (response.country == 'SA') {
jQuery("#input_1_15").val("Saudi Arabia|245");
} else if (response.country == 'SG') {
jQuery("#input_1_15").val("Singapore|245");
} else if (response.country == 'SK') {
jQuery("#input_1_15").val("Slovakia|245");
} else if (response.country == 'SI') {
jQuery("#input_1_15").val("Slovenia|245");
} else if (response.country == 'TW') {
jQuery("#input_1_15").val("Taiwan|245");
} else if (response.country == 'MY') {
jQuery("#input_1_15").val("Malaysia|245");
} else if (response.country == 'PH') {
jQuery("#input_1_15").val("Philippines|245");
} else if (response.country == 'CN') {
jQuery("#input_1_15").val("China|245");
} else if (response.country == 'HK') {
jQuery("#input_1_15").val("Hong Kong|245");
} else if (response.country == 'ID') {
jQuery("#input_1_15").val("Indonesia|245");
}
// Countries With Pricing of $200
else if (response.country == 'ZW') {
jQuery("#input_1_15").val("Zimbabwe|200");
} else if (response.country == 'ZM') {
jQuery("#input_1_15").val("Zambia|200");
} else if (response.country == 'YE') {
jQuery("#input_1_15").val("Yemen|200");
} else if (response.country == 'VN') {
jQuery("#input_1_15").val("Viet Nam|200");
} else if (response.country == 'VE') {
jQuery("#input_1_15").val("Venezuela|200");
} else if (response.country == 'VU') {
jQuery("#input_1_15").val("Vanuatu|200");
} else if (response.country == 'UZ') {
jQuery("#input_1_15").val("Uzbekistan|200");
} else if (response.country == 'UG') {
jQuery("#input_1_15").val("Uganda|200");
} else if (response.country == 'TV') {
jQuery("#input_1_15").val("Tuvalu|200");
} else if (response.country == 'TZ') {
jQuery("#input_1_15").val("Tanzania|200");
} else if (response.country == 'TJ') {
jQuery("#input_1_15").val("Tajikistan|200");
} else if (response.country == 'SD') {
jQuery("#input_1_15").val("Sudan|200");
} else if (response.country == 'LK') {
jQuery("#input_1_15").val("Sri Lanka|200");
} else if (response.country == 'PK') {
jQuery("#input_1_15").val("Pakistan|200");
} else if (response.country == 'NG') {
jQuery("#input_1_15").val("Nigeria|200");
} else if (response.country == 'NE') {
jQuery("#input_1_15").val("Niger|200");
} else if (response.country == 'KE') {
jQuery("#input_1_15").val("Kenya|200");
} else if (response.country == 'JM') {
jQuery("#input_1_15").val("Jamaica|200");
} else if (response.country == 'IN') {
jQuery("#input_1_15").val("India|200");
} else if (response.country == 'HN') {
jQuery("#input_1_15").val("Honduras|200");
} else if (response.country == 'HT') {
jQuery("#input_1_15").val("Haiti|200");
} else if (response.country == 'GT') {
jQuery("#input_1_15").val("Guatemala|200");
} else if (response.country == 'GH') {
jQuery("#input_1_15").val("Ghana|200");
} else if (response.country == 'GM') {
jQuery("#input_1_15").val("Indonesia|200");
} else if (response.country == 'GA') {
jQuery("#input_1_15").val("Indonesia|200");
} else if (response.country == 'FJ') {
jQuery("#input_1_15").val("Indonesia|200");
} else if (response.country == 'ET') {
jQuery("#input_1_15").val("Indonesia|200");
} else if (response.country == 'ER') {
jQuery("#input_1_15").val("Indonesia|200");
} else if (response.country == 'GQ') {
jQuery("#input_1_15").val("Indonesia|200");
} else if (response.country == 'SV') {
jQuery("#input_1_15").val("Indonesia|200");
} else if (response.country == 'EG') {
jQuery("#input_1_15").val("Indonesia|200");
} else if (response.country == 'DO') {
jQuery("#input_1_15").val("Indonesia|200");
} else if (response.country == 'DM') {
jQuery("#input_1_15").val("Indonesia|200");
} else if (response.country == 'DJ') {
jQuery("#input_1_15").val("Indonesia|200");
} else if (response.country == 'CI') {
jQuery("#input_1_15").val("Côte d'Ivoire|200");
} else if (response.country == 'CG') {
jQuery("#input_1_15").val("Indonesia|200");
} else if (response.country == 'KM') {
jQuery("#input_1_15").val("Indonesia|200");
} else if (response.country == 'TD') {
jQuery("#input_1_15").val("Indonesia|200");
} else if (response.country == 'CF') {
jQuery("#input_1_15").val("Indonesia|200");
} else if (response.country == 'CM') {
jQuery("#input_1_15").val("Indonesia|200");
} else if (response.country == 'KH') {
jQuery("#input_1_15").val("Indonesia|200");
} else if (response.country == 'CV') {
jQuery("#input_1_15").val("Cabo Verde");
} else if (response.country == 'BI') {
jQuery("#input_1_15").val("Burundi|200");
} else if (response.country == 'BW') {
jQuery("#input_1_15").val("Botswana|200");
} else if (response.country == 'BY') {
jQuery("#input_1_15").val("Belarus|200");
} else if (response.country == 'BD') {
jQuery("#input_1_15").val("Bangladesh|200");
} else if (response.country == 'AW') {
jQuery("#input_1_15").val("Aruba|200");
} else if (response.country == 'AM') {
jQuery("#input_1_15").val("Armenia|200");
} else if (response.country == 'DZ') {
jQuery("#input_1_15").val("Algeria|200");
} else if (response.country == 'UY') {
jQuery("#input_1_15").val("Uruguay|200");
} else if (response.country == 'UA') {
jQuery("#input_1_15").val("Ukraine|200");
} else if (response.country == 'PY') {
jQuery("#input_1_15").val("Paraguay|200");
} else if (response.country == 'NI') {
jQuery("#input_1_15").val("Nicaragua|200");
} else if (response.country == 'MA') {
jQuery("#input_1_15").val("Morocco|200");
} else if (response.country == 'EC') {
jQuery("#input_1_15").val("Ecuador|200");
} else if (response.country == 'BR') {
jQuery("#input_1_15").val("Brazil|200");
} else if (response.country == 'BZ') {
jQuery("#input_1_15").val("Belize|200");
} else if (response.country == 'AR') {
jQuery("#input_1_15").val("Argentina|200");
} else if (response.country == 'AL') {
jQuery("#input_1_15").val("Albania|200");
} else if (response.country == 'TH') {
jQuery("#input_1_15").val("Thailand|200");
} else if (response.country == 'IQ') {
jQuery("#input_1_15").val("Iraq|200");
} else if (response.country == 'BO') {
jQuery("#input_1_15").val("Bolivia|200");
} else if (response.country == 'TR') {
jQuery("#input_1_15").val("Turkey|200");
} else if (response.country == 'PE') {
jQuery("#input_1_15").val("Peru|200");
} else if (response.country == 'KR') {
jQuery("#input_1_15").val("South Korea|200");
} else if (response.country == 'ZA') {
jQuery("#input_1_15").val("South Africa|200");
} else if (response.country == 'PA') {
jQuery("#input_1_15").val("Panama|200");
} else if (response.country == 'MX') {
jQuery("#input_1_15").val("Mexico|200");
} else if (response.country == 'CR') {
jQuery("#input_1_15").val("Costa Rica|200");
} else if (response.country == 'CO') {
jQuery("#input_1_15").val("Colombia|200");
} else if (response.country == 'CL') {
jQuery("#input_1_15").val("Chile|200");
} else if (response.country == 'BG') {
jQuery("#input_1_15").val("Bulgaria|200");
}
// Redirect Other Countries to Sorry Page
else {
var url = "https://www.devopsinstitute.com/exam-unavailable/";
jQuery(location).attr('href', url);
}
}, "jsonp");
setTimeout(function() {
var getValue = jQuery("input[name=input_7]").val();
var errorUrl = "https://www.devopsinstitute.com/something-went-wrong/";
// Show Exam Cost in Console
console.log(getValue);
// If Exame Cost is 0 Redirect User to Error Page
if (getValue == "0") {
jQuery("#gform_submit_button_1").css("display", "none");
console.log("⚠️ ERROR: AMOUNT CANNOT BE 0 ⚠️");
jQuery(location).attr('href', errorUrl);
}
}, 7000);
Everything that you want to run when the page first loads should be within a "ready" block, i.e.
jQuery(document).ready(function () {
//your code here
});
That way, you guarantee that all the HTML elements and other content which it might rely on have already been loaded when the code begins to execute. It's far more reliable then just running the code directly in the main body of the JS, or trying to use timeouts to guess how long things might take to load.
You didn't identify whether you'd debugged and narrowed down this failure to any more specific area in the code or found any error messages, but if it's a startup / page load issue then it's often related to missing DOM elements etc. which the JS code then cannot interact with because the browser hasn't loaded them yet.
Reference: https://api.jquery.com/ready/
N.B. This is the same functionality as is provided by the "DOMContentLoaded" event in vanilla JS:
document.addEventListener('DOMContentLoaded', (event) => {
//your code here
});
Stuck setting tic tac toe up. I have the board set, turns for players 1 and 2, all box# win possibilities, and some reason it's alerting that player has won even though they didn't. Example player1=x player2=o sq1 && sq2 &&sq3 returns true so x-o-x alerts as winner for player one
$(document).ready(function() {
var player = 1;
$('.box').on('click', function(event) {
alert('add symbol here');
var boxSelected = $(this);
if (boxSelected.hasClass('exes') || boxSelected.hasClass('ohs')) {
alert('You cant do that! Nice try');
} else {
if (player == 1) {
boxSelected.addClass('exes');
if (checkIfPlayerWon('exes')) {
alert('Congrats! Player ' + player + 'has won the game!');
} else {
player = 2;
}
} else {
boxSelected.addClass('ohs');
if (checkIfPlayerWon('ohs')) {
alert('Congrats! Player ' + player + 'has won the game!');
} else {
player = 1;
}
}
}
});
function checkIfPlayerWon(symbol) {
if ($('.sq1').hasClass(symbol) && $('.sq2') && $('.sq3').hasClass(symbol)) {
return true;
} else if ($('.sq4').hasClass(symbol) && $('.sq5') && $('.sq6').hasClass(symbol)) {
return true;
} else if ($('.sq7').hasClass(symbol) && $('.sq8') && $('.sq9').hasClass(symbol)) {
return true;
} else if ($('.sq1').hasClass(symbol) && $('.sq4') && $('.sq7').hasClass(symbol)) {
return true;
} else if ($('.sq2').hasClass(symbol) && $('.sq5') && $('.sq8').hasClass(symbol)) {
return true;
} else if ($('.sq3').hasClass(symbol) && $('.sq6') && $('.sq9').hasClass(symbol)) {
return true;
} else if ($('.sq3').hasClass(symbol) && $('.sq5') && $('.sq7').hasClass(symbol)) {
return true;
} else if ($('.sq1').hasClass(symbol) && $('.sq5') && $('.sq9').hasClass(symbol)) {
return true;
} else if ($('.sq3').hasClass(symbol) && $('.sq5') && $('.sq7').hasClass(symbol)) {
return true;
} else {
return false;
}
}
});
You are missing the hasClass(symbol) on some of the boxes.
Change all:
if ($('.sq1').hasClass(symbol) && $('.sq2') && $('.sq3').hasClass(symbol)) {
return true;
To:
if ($('.sq1').hasClass(symbol) && $('.sq2').hasClass(symbol) && $('.sq3').hasClass(symbol)) {
return true;
How would I determine if there's a draw? ( begginer coder problems)
I can identify who's the winner but can't seem to figure out how to implement the draw part! please help
heres my code not the prettiest, let me know how I can improve
var player = 1;
$('.box').on('click', function(event) {
alert('add symbol here');
var boxSelected = $(this);
$("#goAgain").click(function(event) {
location.reload();
});
if (boxSelected.hasClass('exes') || boxSelected.hasClass('ohs')) {
alert('Sorry, that has already been taken!');
} else {
if (player === 1) {
boxSelected.addClass('exes');
if (checkIfPlayerWon('exes')) {
alert('Congrats! Player ' + player + 'has won the game!');
} else {
player = 2;
}
} else {
boxSelected.addClass('ohs');
if (checkIfPlayerWon('ohs')) {
alert('Congrats! Player ' + player + 'has won the game!');
} else {
player = 1;
}
}
}
});
function checkIfPlayerWon(symbol) {
if ($('.sq1').hasClass(symbol) && $('.sq2').hasClass(symbol) && $('.sq3').hasClass(symbol)) {
return true;
} else if ($('.sq4').hasClass(symbol) && $('.sq5').hasClass(symbol) && $('.sq6').hasClass(symbol)) {
return true;
} else if ($('.sq7').hasClass(symbol) && $('.sq8').hasClass(symbol) && $('.sq9').hasClass(symbol)) {
return true;
} else if ($('.sq1').hasClass(symbol) && $('.sq4').hasClass(symbol) && $('.sq7').hasClass(symbol)) {
return true;
} else if ($('.sq2').hasClass(symbol) && $('.sq5').hasClass(symbol) && $('.sq8').hasClass(symbol)) {
return true;
} else if ($('.sq3').hasClass(symbol) && $('.sq6').hasClass(symbol) && $('.sq9').hasClass(symbol)) {
return true;
} else if ($('.sq1').hasClass(symbol) && $('.sq5').hasClass(symbol) && $('.sq9').hasClass(symbol)) {
return true;
} else if ($('.sq3').hasClass(symbol) && $('.sq5').hasClass(symbol) && $('.sq9').hasClass(symbol)) {
return true;
} else {
return false;
}
}
});
If you have a class .square which all the squares have, then you can run a forEach loop over that class like $(.square).forEach(function(){..., which checks if the square is empty. If none of the squares are empty then a boolean game_still_on would be false and from that, after your syncronous loop has completed you would initiate the draw-game routine.
I want that when click in "OK" in the confirm box the entire webpage go to fullscreen, but with this only get error TypeError: docelem.requestFullscreen is not a function. I tried of all but nothing...
var conf = confirm("Fullscreen mode?");
var docelem = document.documentElement;
if (conf == true) {
docelem.requestFullscreen();
}
else if (conf == true) {
docelem.mozRequestFullScreen();
}
else if (conf == true) {
docelem.webkitRequestFullScreen();
}
else if (conf == true) {
docelem.msRequestFullscreen();
}
Some solution? or is it not possible with confirm()? Because with a button works:
(function () {
var fullscreenon = document.getElementById("fullscreenbutton");//button Id
if (fullscreenon) {
fullscreenon.addEventListener("click", function () {
var docelem = document.documentElement;
if (docelem.requestFullscreen) {
docelem.requestFullscreen();
}
else if (docelem.msRequestFullscreen) {
docelem.msRequestFullscreen();
}
else if (docelem.mozRequestFullScreen) {
docelem.mozRequestFullScreen();
}
else if (docelem.webkitRequestFullScreen) {
docelem.webkitRequestFullScreen();
}
}, false);
}
})();
Firsty, your conditions are different between 2 samples. Right code is:
var conf = confirm("Fullscreen mode?");
var docelem = document.documentElement;
if (conf == true) {
if (docelem.requestFullscreen) {
docelem.requestFullscreen();
}
else if (docelem.mozRequestFullScreen) {
docelem.mozRequestFullScreen();
}
else if (docelem.webkitRequestFullscreen) {
docelem.webkitRequestFullscreen();
}
else if (docelem.msRequestFullscreen) {
docelem.msRequestFullscreen();
}
}
Secondly and importantly, you can't make fullscreen your page without a user interaction. This is a security restriction. If you trigger code above by a user click, it'll be work. For example:
document.onclick = function (argument) {
var conf = confirm("Fullscreen mode?");
var docelem = document.documentElement;
if (conf == true) {
if (docelem.requestFullscreen) {
docelem.requestFullscreen();
}
else if (docelem.mozRequestFullScreen) {
docelem.mozRequestFullScreen();
}
else if (docelem.webkitRequestFullScreen) {
docelem.webkitRequestFullScreen();
}
else if (docelem.msRequestFullscreen) {
docelem.msRequestFullscreen();
}
}
}
If you click anywhere on the page, fullscreen mode will be activated. More detail: https://stackoverflow.com/a/20533579/198062
I have this jquery scripts. I want to use the return value from the function stockArt() into function prod_actname(). It seems i'm missing something or my implementation is wrong. How could i possibly do that?
Another scenario is when StockArt() value is changed the Activity Name must be updated also.
Say Stock Art Color is green. and the Activity Name color also be updated to color green, without selecting the color green from prod_actname() function. It will automatically be change as the StockArt color is also change. They must be in the same color.
jQuery( document ).ready(function($) {
$('#preview_design').css("background-color","black");
$('#stock_art').change(function() {
var retVal = stockArt();
$('#prod_actname').data("stockData", retVal);
});
$('#prod_actname').change(function() {
var stockData = $('#prod_actname').data("stockData");
prod_actname(stockData);
});
function stockArt()
{
var returnValue = null;
var selectStock_Art = $('#stock_art :selected').val();
if(selectStock_Art == '31145-RB-emb')
{ // green
$('#stockArt_img').removeClass().addClass('stock_art_grbg1');
}
else if(selectStock_Art == '33441-RB-emb1')
{ // yellow
$('#stockArt_img').removeClass().addClass('stock_art_yebg2');
}
else if(selectStock_Art == '33441-RB-emb2')
{ // gold
$('#stockArt_img').removeClass().addClass('stock_art_gobg3');
}
else {
$('#stockArt_img').removeClass();
}
returnValue = selectStock_Art;
return returnValue;
}
function prod_actname(stockData){
var StockArtResult = stockData;
//User stockData as needed
// assign the value to a variable, so you can test to see if it is working
var selectActivity_Name = $('#prod_actname :selected').val();
//alert(selectActivity_Name);
if(selectActivity_Name == 'Baseball')
{
$('#activityName_img').removeClass();
if(stockArtValue == '31145-RB-emb'){
$('#activityName_img').addClass('activity_name_GRbg1');
}
else if(stockArtValue == '33441-RB-emb1'){
$('#activityName_img').addClass('activity_name_YEbg1');
}else if(stockArtValue == '33441-RB-emb2') {
$('#activityName_img').addClass('activity_name_GObg1');
}
}
else if(selectActivity_Name == 'Basketball')
{
$('#activityName_img').removeClass();
if(stockArtValue == '31145-RB-emb'){
$('#activityName_img').addClass('activity_name_GRbg2');
}
else if(stockArtValue == '33441-RB-emb1'){
$('#activityName_img').addClass('activity_name_YEbg2');
}else if(stockArtValue == '33441-RB-emb2') {
$('#activityName_img').addClass('activity_name_GObg2');
}
}
else if(selectActivity_Name == 'Boys Basketball')
{
$('#activityName_img').removeClass();
if(stockArtValue == '31145-RB-emb'){
$('#activityName_img').addClass('activity_name_GRbg3');
}
else if(stockArtValue == '33441-RB-emb1'){
$('#activityName_img').addClass('activity_name_YEbg3');
}else if(stockArtValue == '33441-RB-emb2') {
$('#activityName_img').addClass('activity_name_GObg3');
}
}
else if(selectActivity_Name == 'Girls Basketball')
{
$('#activityName_img').removeClass();
if(selectStock_Art == '31145-RB-emb'){
$('#activityName_img').addClass('activity_name_GRbg4');
}
else if(selectStock_Art == '33441-RB-emb1'){
$('#activityName_img').addClass('activity_name_YEbg4');
}else if(selectStock_Art == '33441-RB-emb2') {
$('#activityName_img').addClass('activity_name_GObg4');
}
}
}
});
Use data attributes to store data for '#prod_actname' and later access it.
You can leverage jQuery.data for this.
Try this
jQuery( document ).ready(function($) {
$('#preview_design').css("background-color","black");
$('#stock_art').change(function() {
var retVal = stockArt();
$('#prod_actname').data("stockData", retVal);
});
$('#prod_actname').change(function() {
var stockData = $('#prod_actname').data("stockData");
prod_actname(stockData);
});
function stockArt()
{
var returnValue = null;
var selectStock_Art = $('#stock_art :selected').val();
if(selectStock_Art == '31145-RB-emb')
{ // green
$('#stockArt_img').removeClass().addClass('stock_art_grbg1');
}
else if(selectStock_Art == '33441-RB-emb1')
{ // yellow
$('#stockArt_img').removeClass().addClass('stock_art_yebg2');
}
else if(selectStock_Art == '33441-RB-emb2')
{ // gold
$('#stockArt_img').removeClass().addClass('stock_art_gobg3');
}
else {
$('#stockArt_img').removeClass();
}
returnValue = selectStock_Art;
return returnValue;
}
var stockArtValue = stockArt();
function prod_actname(stockData){
//User stockData as needed
// assign the value to a variable, so you can test to see if it is working
var selectActivity_Name = $('#prod_actname :selected').val();
//alert(selectActivity_Name);
if(selectActivity_Name == 'Baseball')
{
$('#activityName_img').removeClass();
if(stockArtValue == '31145-RB-emb'){
$('#activityName_img').addClass('activity_name_GRbg1');
}
else if(stockArtValue == '33441-RB-emb1'){
$('#activityName_img').addClass('activity_name_YEbg1');
}else if(stockArtValue == '33441-RB-emb2') {
$('#activityName_img').addClass('activity_name_GObg1');
}
}
else if(selectActivity_Name == 'Basketball')
{
$('#activityName_img').removeClass();
if(stockArtValue == '31145-RB-emb'){
$('#activityName_img').addClass('activity_name_GRbg2');
}
else if(stockArtValue == '33441-RB-emb1'){
$('#activityName_img').addClass('activity_name_YEbg2');
}else if(stockArtValue == '33441-RB-emb2') {
$('#activityName_img').addClass('activity_name_GObg2');
}
}
else if(selectActivity_Name == 'Boys Basketball')
{
$('#activityName_img').removeClass();
if(stockArtValue == '31145-RB-emb'){
$('#activityName_img').addClass('activity_name_GRbg3');
}
else if(stockArtValue == '33441-RB-emb1'){
$('#activityName_img').addClass('activity_name_YEbg3');
}else if(stockArtValue == '33441-RB-emb2') {
$('#activityName_img').addClass('activity_name_GObg3');
}
}
else if(selectActivity_Name == 'Girls Basketball')
{
$('#activityName_img').removeClass();
if(selectStock_Art == '31145-RB-emb'){
$('#activityName_img').addClass('activity_name_GRbg4');
}
else if(selectStock_Art == '33441-RB-emb1'){
$('#activityName_img').addClass('activity_name_YEbg4');
}else if(selectStock_Art == '33441-RB-emb2') {
$('#activityName_img').addClass('activity_name_GObg4');
}
}
}
});
One way is to store the output of the stockArt() in a variable and then pass that as an argument to the prod_actname(). For this, you would need to modify the function signature of the prod_actname() function to accept an argument. Something like this
var stockArtValue;
$('#stock_art').change(function() {
stockArtValue = stockArt();
});
$('#prod_actname').change(function() {
prod_actname(stockArtValue);
});
function prod_actname(val){
....
}
For some cases, it might be useful to consider that the stockArtValue variable has indeed been changed. You can typically use another state variable to indicate. Alternatively, if you know the set of likely input values, then you initialize it with a value outside of that input value set and check against it.
You could save its value in a property...
jQuery( document ).ready(function($) {
var StockArtResult = null;
$('#stock_art').change(function() {
StockArtResult = stockArt();
});
$('#prod_actname').change(function() {
if(StockArtResult != null)
{
prod_actname(StockArtResult);
}
});
});