We Keep Coding

Javascript errors window.setInterval

i programmed a dashboard which is responses to userinput. For example there is an expertmode where experienced users with our models can add advanced stuff. The expert mode shall only be shown if a user checked "show expert mode".
My Code works, but produces a lot of errors:
window.setInterval(function(){
if (document.getElementById("expertmodus").checked == true) {
document.getElementById("allbranches").querySelector(".col-sm-6").className = "col-sm-4";
document.getElementById("Mitte").querySelector(".col-sm-6").className = "col-sm-4";
} else {}
}, 1);
window.setInterval(function(){
if (document.getElementById("expertmodus").checked == false) {
document.getElementById("allbranches").querySelector(".col-sm-4").className = "col-sm-6";
document.getElementById("Mitte").querySelector(".col-sm-4").className = "col-sm-6";
} else {}
}, 1);
This is my code, it´s pretty simple. How would an experienced programmer with javascript handle this?
Best regards
Markus

unfortunately, this is an R-Shiny App. I guess the Code will not make sense here.
materialSwitch(inputId = "expertmodus", label = "Experteneinstellungen sind ausgeblendet", status = "primary", right = TRUE)

Winner Detection in TicTacToe

How to get winner detection?
My code isn't working right now i only need the winner detection if someone can help me then do this .
$(document).ready(function() {
var xoro = 1;
$('#reset').on("click", function() {
$('img').attr("src", "blank.png");
});
$('img').on("click", function() {
var tmp = $(this).attr("src");
if (tmp == "blank.png" && xoro == 1) {
$(this).attr("src", "x.png");
xoro = 0;
} else if (tmp == "blank.png" && xoro == 0) {
$(this).attr("src", "o.png");
xoro = 1;
}
});
});

With your code you cant really determine a winner.
Options you have are :
Give your images ids . like
Let say we have this 3x3 field and we say its a 2dimensional array. Then the top left field is [0][0] and your bottom right is [3][3]
Your HTML code should be somethig like this
<img src="x.png" id="0-0"></img><img src="blank.png" id="0-1"></img>...
And so on.
After youve eine that you have to Start writing a huge if statement with all the winning Casey where you check if the SRC are all "x.PNG" or so.
EG: if ID 0-0,0-1 and 0-2 all have the SRC x.PNG x wins .
Best is to put these into a function named checkForWinner() and then just call this Funktion after every click or so
I hope i could help you out.

This question has already been answered here (in Java language though but the idea is the same). For that I suggest you store every move in a matrix which you can the use to determine the winner.
In addition, you have to make the images identifiable (as zeropublix suggested) so that you can actually capture the user's input and fill the matrix.

Play/Pause Audio Button Using HTML5 And JavaScript

I am facing a problem for a couple of hours. I have some Radio Channels into a HTML document. Every channel has an image (it's logo). I can't figure out how to make the "click to Play/Pause" working.
Here's the JSFiddle document : http://jsfiddle.net/s35vk80m/1/ 123
If you click on the first image, it will play/pause the channel. The second button act like the first one.
How can I make it work, so that both of them would work independently and if I click on the second one while the first one is running, it would stop the first channel and start the second one?
I am sorry, I am a begginer :-).

Based on w3schools html5 audio, m3 and pls audio types are not supported.
Maybe streaming will do (never tried), something like this is-it-possible-to-play-shoutcast-internet-radio-streams-with-html5.

function aud_play_pause() is defined in your code twice. You need to give the second function a different name or just use one function to do both things. I would do something like this:
function aud_play_pause(channel) {
var Radio21 = document.getElementById("Radio21");
var RadioZU = document.getElementById("RadioZU");
if(channel == 'radio21'){
RadioZU.pause();
if (Radio21.paused) {
Radio21.play();
} else {
Radio21.pause();
}
}
if(channel == 'radioZU'){
Radio21.pause();
if (RadioZU.paused) {
RadioZU.play();
} else {
RadioZU.pause();
}
}
}
</script>
Someone more knowledgeable than I could probably provide a more elegant solution but this should work.
Also, I couldn't get your JSFiddle to work in my browser and I couldn't get my JSFiddle to work so I haven't been able to test the function. Firefox didn't like the ContentTypes you are using: "HTTP "Content-Type" of "audio/x-mpegurl" is not supported. Load of media resource http://www.radio21.ro/Radio21Live.m3u failed."
EDIT:
I thought about this a little more and basically you need a toggle. I can't get your example to work in Firefox so I'm going to create a toggle example that doesn't solve your problem but should illustrate how to fix it.
function example(string) {
var first_div = document.getElementById("one");
var second_div = document.getElementById("two");
if(string == 'one'){
second_div.innerHTML = "OFF";
if (first_div.innerHTML == "OFF") {
first_div.innerHTML = "ON";
} else {
first_div.innerHTML = "OFF";
}
}
if(string == 'two'){
first_div.innerHTML = "OFF";
if (second_div.innerHTML == "OFF") {
second_div.innerHTML = "ON";
} else {
second_div.innerHTML = "OFF";
}
}
}
<div id="one" onclick="example('one')">OFF</div>
<div id="two" onclick="example('two')">OFF</div>

How to run function after event is run?

I am a beginner with all coding. Here is my general goal. I am running something relatively simple where I have 8 superheroes on the screen. I would like the user to eliminate the 4 DC superheroes from the screen and after all 4 of them are eliminated from the screen I want the system to alert the user that they have won the game. They don't have to do it in any order so I ran the superHero function each time a DC character was clicked to check if all four DC superheroes had been eliminated yet. Somebody please help me. I feel like it is something very simple I am messing up on. Thanks a ton in advance.
/*This is my jquery that shows all 8 of my superheroes*/
$('#heroes').show();
var flashHidden = !$('#greenlantern').is(':visible');
var greenHidden = !$('#greenlantern').is(':visible');
var batmanHidden = !$('#batman').is(':visible');
var supermanHidden = !$('#superman').is(':visible');
function superHero() {
if(flashHidden && batmanHidden && supermanHidden && greenHidden) {
alert ("Congratulations!!! You have won the game!! Please proceed forward and fill out a quick survey for the developers");
}
}
$('#flash').click(function(){
$('#flash').hide('slow',function(){
superHero();
});
});
$('#greenlantern').click(function(){
$('#greenlantern').hide('slow',function(){
superHero();
});
});
$('#batman').click(function(){
$('#batman').hide('slow',function(){
superHero();
});
});
$('#superman').click(function(){
$('#superman').hide('slow',function(){
superHero();
});
});
});
Right now the current thing that is happening is I will eliminate all of the correct superheroes and it will not alert me that the user has won. I've tried a lot of different things and the only other result I've gotten is to have the system alert the user every time they click on a superhero that they've won which is also incorrect.
EDIT
This has been solved by changing the scope of the variables to inside the function.

You should declare your variables i.e. flashHidden in your function. Currently you are setting then at the start.
function superHero() {
var flashHidden = !$('#flash').is(':visible');
var greenHidden = !$('#greenlantern').is(':visible');
var batmanHidden = !$('#batman').is(':visible');
var supermanHidden = !$('#superman').is(':visible');
if(flashHidden && batmanHidden && supermanHidden && greenHidden) {
alert ("Congratulations!!! You have won the game!! Please proceed forward and fill out a quick survey for the developers");
}
}
Additionally your click handler can be condensed into
$('#flash, #greenlantern, #batman, #superman').click(function(){
$(this).hide('slow',function(){
superHero();
});
});

You're setting...
var flashHidden = !$('#greenlantern').is(':visible');
...to start with. But you're not updating that variable later on when it gets hidden. So according to your check of:
if(flashHidden && batmanHidden && supermanHidden && greenHidden) {
...Flash is still visible. Even though, yes, on the page he's gone.
Try adding this:
$('#flash').click(function(){
$('#flash').hide('slow',function(){
flashHidden=true;
superHero();
});
});

display message javascript while a calculation is being made

I have been looking around and I cannot seem to figure out how to do this, although it seems like it would be very simple.(mobile development)
What I am trying to do is display a message (kind of like an alert, but not an alert, more like a dialog) while a calculation is being made. Simply like a Loading please wait. I want the message to appear and stay there while the calculation is being done and then be removed. I just cannot seem to find a proper way of doing this.
The submit button is pressed and first checks to make sure all the forms are filled out then it should show the message, it does the calculation, then hides the message.
Here is the Calculation function.
function scpdResults(form) {
//call all of the "choice" functions here
//otherwise, when the page is refreshed, the pulldown might not match the variable
//this shouldn't be a problem, but this is the defensive way to code it
choiceVoltage(form);
choiceMotorRatingVal(form);
getMotorRatingType();
getProduct();
getConnection();
getDisconnect();
getDisclaimer();
getMotorType();
//restore these fields to their default values every time submit is clicked
//this puts the results table into a known state
//it is also used in error checking in the populateResults function
document.getElementById('results').innerHTML = "Results:";
document.getElementById('fuse_cb_sel').innerHTML = "Fuse/CB 1:";
document.getElementById('fuse_cb_sel_2').innerHTML = "Fuse/CB 2:";
document.getElementById('fuse_cb_result').innerHTML = "(result1)";
document.getElementById('fuse_cb_res_2').innerHTML = "(result2)";
document.getElementById('sccr_2').innerHTML = "<b>Fault Rating:</b>";
document.getElementById('sccr_result').innerHTML = "(result)";
document.getElementById('sccr_result_2').innerHTML = "(result)";
document.getElementById('contactor_result').innerHTML = "(result)";
document.getElementById('controller_result').innerHTML = "(result)";
//Make sure something has been selected for each variable
if (product === "Choose an Option." || product === "") {
alert("You must select a value for every field. Select a Value for Product");
**************BLAH************
} else {
//valid entries, so jump to results table
document.location.href = '#results_a';
******This is where the message should start being displayed***********
document.getElementById('motor_result').innerHTML = motorRatingVal + " " + motorRatingType;
document.getElementById('voltage_res_2').innerHTML = voltage + " V";
document.getElementById('product_res_2').innerHTML = product;
document.getElementById('connection_res_2').innerHTML = connection;
document.getElementById('disconnect_res_2').innerHTML = disconnect;
if (BLAH) {
}
else {
}
populateResults();
document.getElementById('CalculatedResults').style.display = "block";
} //end massive else statement that ensures all fields have values
*****Close out of the Loading message********
} //scpd results
Thank you all for your time, it is greatly appreciated

It is a good idea to separate your display code from the calculation code. It should roughly look like this
displayDialog();
makeCalculation();
closeDialog();
If you are having trouble with any of those steps, please add it to your question.

Computers are fast. Really fast. Most modern computers can do several billion instructions per second. Therefore, I'm fairly certain you can rely on a a setTimeout function to fire around 1000ms to be sufficient to show a loading message.
if (product === "Choose an Option." || product === "") {
/* ... */
} else {
/* ... */
var loader = document.getElementById('loader');
loader.style.display = 'block';
window.setTimeout(function() {
loader.style.display = 'none';
document.getElementById('CalculatedResults').style.display = "block";
}, 1000);
}
<div id="loader" style="display: none;">Please wait while we calculate.</div>

You need to give the UI main thread a chance to render your message before starting your calculation.
This is often done like this:
showMessage();
setTimeout(function() {
doCalculation();
cleanUp()
}, 0);
Using the timer allows the code to fall through into the event loop, update the UI, and then start up the calculation.

You're already using a section to pop up a "results" page -- why not pop up a "calculating" page?
Really, there are 4,000,000 different ways of tackling this problem, but why not try writing a "displayCalculatingMessage" function and a "removeCalculatingMessage" function, if you don't want to get all object-oriented on such a simple thing.
function displayCalculatingMessage () {
var submit_button = getSubmitButton();
submit_button.disabled = true;
// optionally get all inputs and disable those, as well
// now, you can either do something like pop up another hidden div,
// that has the loading message in it...
// or you could do something like:
var loading_span = document.createElement("span");
loading_span.id = "loading-message";
loading_span.innerText = "working...";
submit_button.parentElement.replaceChild(loading_span, submit_button);
}
function removeCalculatingMessage () {
var submit_button = getSubmitButton(),
loading_span = document.getElementById("loading-message");
submit_button.disabled = false;
loading_span.parentElement.replaceChild(submit_button, loading_span);
// and then reenable any other disabled elements, et cetera.
// then bring up your results div...
// ...or bring up your results div and do this after
}
There are a billion ways of accomplishing this, it all comes down to how you want it to appear to the user -- WHAT you want to have happen.