Develop Reference

Gecko or JavaScript for choose an option in ComboBox

Please, I'm trying to choose an option in 'ComboBox', but the "optionElement.Selected = true;" doesn't work. Am I using it the right way? It's necessary make another command before? I have an auxiliary function and a stretch of the main function. Detail: "pdcme_cd_tipo_ac" is a 'TextBox':
// MAIN FUNCTION
// ...
var optionElements = oGecko.Document.GetElementsByTagName("option");
foreach (GeckoOptionElement optionElement in optionElements)
{
//2019-12-06 - Fabio I. - If the combo is "ID = #cd_type" (because it takes ALL options from ALL combos!);
if (optionElement.Parent.Id == "#cd_type")
{
if (optionElement.Label.ToUpper() == "APPLICATION")
{
optionElement.Selected = true;
SetTextInput_ID("pdcme_cd_tipo_ac", optionElement.Label);
break;
}
else if (optionElement.Label.ToUpper() == "TOTAL RESCUE")
{
optionElement.Selected = true;
SetTextInput_ID("pdcme_cd_tipo_ac", optionElement.Label);
break;
}
else if (optionElement.Label.ToUpper() == "REDEMPTION LIQUID VALUE")
{
optionElement.Selected = true;
SetTextInput_ID("pdcme_cd_tipo_ac", optionElement.Label);
break;
}
// ...
}
}
private bool SetTextInput_ID(string ID,
string ValueID)
{
GeckoElement ele;
try
{
ele = oGecko.Document.GetElementById(ID);
if (ele == null) return false;
if (ele.GetType().ToString() != "Gecko.DOM.GeckoInputElement") return false;
((GeckoInputElement)ele).Focus();
((GeckoInputElement)ele).Value = ValueID;
((GeckoInputElement)ele).Click();
return true;
}
catch (Exception ex)
{
return false;
}
}

how to add CSS for a innerhtml in javascript

in my innerhtml, i have pass and fail and i want to add css properties for these.
function display()
{
var a=document.getElementById("myList");
var dropdownvalue = a.options [a.selectedIndex].text;
var b=document.getElementById("myText").value;
if(dropdownvalue == b.substring(0,4)) {
document.getElementById("result").innerHTML = "Pass";
} else {
document.getElementById("result").innerHTML = "Fail";
}
}

you can use .style
if(dropdownvalue == b.substring(0,4)) {
document.getElementById("result").innerHTML = "Pass";
document.getElementById("result").style.color = "green";
}
else {
document.getElementById("result").innerHTML= "Fail";
document.getElementById("result").style.color = "red";
}
Comment for any questions :)

Get random 8 images from directory for my game using JQuery

I have developed a memory game from a set of images using JS and PHP and everything works fine. Now I'd like to expand this work and get images from the directory for the game.
JS code :
for (i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function (e) {
var turnable = e.target.dataset.turnable;
//first click
if (!wait && lastKnownButtonId == undefined && lastKnownButtonNumber == undefined && turnable == 'true') {
e.target.dataset.turnable = 'false';
e.target.innerHTML = getgImage(event.target.dataset.number);
e.target.style.backgroundColor = 'yellow';
lastKnownButtonId = e.target.id;
lastKnownButtonNumber = e.target.dataset.number;
}
//second click
else if (!wait && lastKnownButtonId != undefined && lastKnownButtonNumber != undefined && turnable == 'true' && e.target.id != lastKnownButtonId) {
e.target.dataset.turnable = 'false';
e.target.innerHTML = getgImage(event.target.dataset.number);
//match
if (e.target.dataset.number == lastKnownButtonNumber) {
e.target.style.backgroundColor = '#00FF7F';
document.getElementById(lastKnownButtonId).style.backgroundColor = '#00FF7F';
lastKnownButtonId = undefined;
lastKnownButtonNumber = undefined;
matches++;
if (matches == 8) {
showWinScreen();
//clearTimeout(timeoutHandle);
document.getElementById("finalMove").innerHTML = moves;
}
}
//no match
else {
document.getElementById(lastKnownButtonId).style.backgroundColor = 'red';
e.target.style.backgroundColor = 'red';
wait = true;
setTimeout(() => {
e.target.dataset.turnable = 'true';
e.target.style.backgroundColor = 'white'
e.target.innerHTML = getgImage(0);
var tempLastClickedButton = document.getElementById(lastKnownButtonId);
tempLastClickedButton.dataset.turnable = 'true';
tempLastClickedButton.style.backgroundColor = 'white';
tempLastClickedButton.innerHTML = getgImage(0);
lastKnownButtonId = undefined;
lastKnownButtonNumber = undefined;
wait = false;
}, 1000);
}
moveCounter();
}
});
}
function getgImage(number) {
switch (number) {
case '1':
return '<img src="resources/fashion1.jpg">';
case '2':
return '<img src="resources/fashion2.jpg">';
case '3':
return '<img src="resources/fashion3.jpg">';
case '4':
return '<img src="resources/fashion4.jpg">';
case '5':
return '<img src="resources/fashion5.jpg">';
case '6':
return '<img src="resources/fashion6.jpg">';
case '7':
return '<img src="resources/fashion7.jpg">';
case '8':
return '<img src="resources/fashion8.jpg">';
default:
return '<img src="resources/logo.png">';
}
}
So in the above code, I use a set of images in the switch case. Now I'd like to use random 8 images from the directory called "resources". Is it possible to use Jquery to get random 8 images from the directory? I don't know how to proceed

This should help you:
arrayOfImages[Math.floor(Math.random()*arrayOfImages.length)];

So, are they named like fashion1, fashion2, ..... fashion8 if so you could just do this:
'<img src="resources/fashion' + (Math.floor(Math.random() * 8) + 1) + '.jpg">'
This would get you a random image. But if not, it's not possible until your client side code knows all the names upfront like in the comments

Is there a way to change cases within the switch statement?

So, I'm working on a switch statement and i was wondering if it's possible to change the case on a specific action.
Lets say I have this:
var check0 = false;
var check1 = false;
switch(stage){
case "0":
rect(10,10,10,10);
check0 = true;
break;
case "1":
if(check0 === true){
rect(20,20,20,20);
check1 = true;
break;
}else{
/* How to set case 0 ? */
//stage = 0; //Doesnt work
//stage = "0"; //Doesn't work
}
break;
}

var check0 = false;
var check1 = false;
function xyz(stage){
switch(stage){
case "0":
rect(10,10,10,10);
check0 = true;
break;
case "1":
if(check0 === true){
rect(20,20,20,20);
check1 = true;
break;
}else{
xyz(0)
}
break;
}
}

Wrap in function:
var check0 = false;
var check1 = false;
function checkFunc(stage) {
switch(stage){
case "0":
rect(10,10,10,10);
check0 = true;
break;
case "1":
if(check0 === true){
rect(20,20,20,20);
check1 = true;
break;
}else{
checkFunc("0")
}
break;
}
}
checkFunc("1");

Your options for this are to use the method #Tarun Khurana and #Artee have suggested or reorganize the cases so case "1" is on top of case "0", but only breaks if the condition is met:
switch(stage){
case "1":
if(check0 === true){
rect(20,20,20,20);
check1 = true;
break;
}
// case "0" is executed since there is no break statement
case "0":
rect(10,10,10,10);
check0 = true;
break;
}

Try this:
var check0 = false, check1 = false;
function checkSet(stage){
switch(stage){
case 0:
//rect(10,10,10,10);
check0 = true;
return;
case 1:
if(check0 === true){
//rect(20,20,20,20);
check1 = true;
return;
}
else{
checkSet(0);
}
return;
}
}
console.log(check0); checkSet(1); console.log(check0);

Changing property of an object in Javascript

Hi i am trying to refresh the value of a property inside an object after delay of one second i am using setInterval function for that purpose but value of the property i get is not right
var nextlvl = '';
function showPlaybackData() {
if(j.nextLevel == -1){
nextlvl = '';
}else if(j.nextLevel == 0){
nextlvl = '240p';
}else if(j.nextLevel == 1){
nextlvl = '360p';
}else if(j.nextLevel == 2){
nextlvl = '480p';
}else if(j.nextLevel == 3){
nextlvl = '720p';
}else if(j.nextLevel == 4){
nextlvl = '1080p';
}
console.log(nextlvl);
return nextlvl;
}
var g = {
id: -1,
label: 'auto(' + setInterval( showPlaybackData , 1000) +')',
selected: -1 === j.manualLevel
};
e.push(g)
the property label's value should be one of these resolutions i am setting according to condition but it shows 14 or 18 or 15. any solution to that?
when i use console.log i get accurate value within the function but when i call the function in setInterval the value is not right.

You need to refactor the code so that you use nextlvl within the function, instead of returning it. It's difficult to answer without seeing your full code, but something like this :
var j = ....
var e = [];
var g = {
id: -1,
selected: -1 === j.manualLevel
};
function showPlaybackData() {
var nextlvl = '';
if(j.nextLevel == 8){
nextlvl = '';
}else if(j.nextLevel == 0){
nextlvl = '240p';
}else if(j.nextLevel == 1){
nextlvl = '360p';
}else if(j.nextLevel == 2){
nextlvl = '480p';
}else if(j.nextLevel == 3){
nextlvl = '720p';
}else if(j.nextLevel == 4){
nextlvl = '1080p';
}
console.log(nextlvl);
g.label = 'auto(' + nextlvl +')';
e.push(g);
};
setInterval(showPlaybackData, 1000);
As a note, you should consider looking at switch statements, if you're not aware of them, as an alternative to the if/elses.

setInterval returns an identifier that allows you to retrieve (and, for example, clear) the timer, rather than the result of the function. Rather than returning the value you want in the function that's looped, you'll need to set a value in an object whose scope you have access to from within that loop.

May be this works for you :
function showPlaybackData(jpassed) {
var nextlvl = '';
switch(jpassed.nextLevel) {
case '':
nextlvl = '';
break;
case '240p':
nextlvl = '240p';
break;
case '360p':
nextlvl = '360p';
break;
case '480p':
nextlvl = '480p';
break;
case '720p':
nextlvl = '720p';
break;
case '1080p':
nextlvl = '1080p';
break;
default:
// any default logic
}
console.log(nextlvl);
return nextlvl;
}
And then update your object inside setinterval :
var j = ...
var g = {
id: -1,
label:'',
selected: -1 === j.manualLevel
};
setInterval(function(){
g.label = 'auto(' +showPlaybackData(j)+')' ;
e.push(g)
},2000,j,showPlaybackData,g);
#Karl Reid : Thanx Karl, I've updated the answer.