Forgive me if this is simple. I'm new to javascript.
I'm trying to make certain divs appear or hide based on the users answer to questions. I've created a function for each question that gets the results of that question based on their value. But I can't get the && additional condition to work. I need the div to appear ONLY if both conditions are true. It doesn't even seem to recognize anything from && and beyond. Q1 also sets some of the text in the div based on the answer. That seems to be working fine.
// Question 1
function analyzeQ1(answerQ1) {
if (answerQ1 == "TMC" || answerQ1 == "CMH" || answerQ1 == "SLH" || answerQ1 == "KU" || answerQ1 == "UMKC") {
document.getElementById('A1').innerHTML = " • Contact Research Administration at "+ answerQ1; + hideStuff('Q1a') + showStuff('A1')
} else if
(answerQ1 == "Other") {
showStuff('Q1a')
}
}
//Question 3
function analyzeQ3(answerQ3) {
if (answerQ3 == "no" && answerQ1 == "TMC") {
showStuff('A3') + hideStuff('Q3a')
} else if
(answerQ3 == "yes") {
showStuff('Q3a')
}
In the first code snippet you have a stray semicolon:
document.getElementById('A1').innerHTML = " • Contact Research Administration at "+ answerQ1;
hideStuff('Q1a');
showStuff('A1');
In the second code snippet you refer to answerQ1 but never pass it in to the function so you need:
//Question 3
function analyzeQ3(answerQ3, answerQ1) {
if (answerQ3 === "no" && answerQ1 === "TMC") {
showStuff('A3') + hideStuff('Q3a')
} else if
(answerQ3 === "yes") {
showStuff('Q3a')
}
Note that I used === vs ==. == is evil and you should forget that it exists in Javascript.
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Comparison_Operators
Related
I made a simple HTML website using HTML and JavaScript that suggests a song based on the attributes that the user selects. I have everything working, However, for example, in the image below, the second "else-if" statement and the last "else-if" statement end up returning the song title of the second "else-if" statement. In the last statement, it will return the song title that is in the second "else-if" statement. It looks like it is ignoring the band[0].checked part of the condition of the last "else-if" statement. I am unsure why it is just ignoring that part of the condition for the statement? My code for this part is below:
Everything works as it should, except for the last two "else-if" statements because of the issue I stated above.
var genre = document.getElementById("songGenre").value;
var bandList = document.getElementsByName("bandList");
var band = document.getElementsByName("band");
if (genre == "Rock" && bandList[0].checked && band[1].checked && band[2].checked) {
alert("Our song suggestion: Tip the Scales");
}
else if (genre == "Rock" && bandList[0].checked && band[1].checked && band[3].checked) {
alert("Our song suggestion: Savior");
}
else if (genre == "Rock" && bandList[0].checked && band[0].checked && band[2].checked) {
alert("Our song suggestion: Hero of War");
}
else if (genre == "Rock" && bandList[0].checked && band[0].checked && band[3].checked) {
alert("Our song suggestion: Swing Life Away");
}
else if (genre == "Rock" && bandList[0].checked && band[0].checked && band[1].checked && band[2].checked) {
alert("Our song suggestion: Entertainment");
}
else if (genre == "Rock" && bandList[0].checked && band[0].checked && band[1].checked && band[3].checked) {
alert("Our song suggestion: Elective Amnesia");
}
This is happening because when the condition:
(genre == "Rock" && bandList[0].checked && band[0].checked && band[1].checked && band[3].checked)
is true, then
(genre == "Rock" && bandList[0].checked && band[1].checked && band[3].checked)
is also true.
However, since you are using elseif, it will stop at the second condition and not continue checking down the line.
In order to fix this, you need to change the order of you elseif blocks, and put the most specific one in the top, and the more generic one in the bottom. In other words, put the longer complex if's on top, and simple short ones in the bottom.
Once you fix the order from specific --> simple, you will see your application behaving as expected.
I dont want to do the if statement when on pageAge OR ON pageMore. When i go to pageAge it works it doesn't execute the script but when I go to pageMore it does. I'm not sure what operator to use in this situation. When I put pageMore before the || it works on that page but not on the othe one.
if ( top.location.pathname != pageAge || pageMore) {
//if not verified go to connect
$("body").css("display", "none");
if (age === null && top.location.pathname != pageConnect) {
window.location.href = pageConnect;
}
//if to young go to age page while cookie is found (1day)
if (age == toYoung) {
window.location.href = pageAge;
}
//if already verified go to like page.
if (age == legal && top.location.pathname === pageConnect) {
window.location.href = pageLike;
}
}
It should be:
if ( top.location.pathname != pageAge && top.location.pathname != pageMore)
I'm trying to hide/show sections of a page using the following script:
$(function () {
$('.open').on('click', function () {
var contentType = $(this).attr('id');
if (contentType == "all") {
$('.content-div').show();
} else if (contentType == "train" || "manual") {
$('.content-div.' + contentType).show();
$('.content-div:visible:not(.' + contentType + ')').hide();
} else if (contentType == "close") {
$('.content-div').hide();
} else {
$('.content-div.' + contentType).toggle();
}
});
});
A jsfiddle example is here with html
The issue is with the final line in the else part - this works correctly (show/hide the relevant div(s) with the associated class) when outside the if-else statement but doesn't work in the else section - the div appears the first time a numbered button is clicked, but doesn't disappear on reclicking.
What am I doing wrong? Many thanks.
Replace:
} else if (contentType == "train" || "manual") {
with:
} else if (contentType == "train" || contentType == "manual") {
"manual" is always evaluated as true therefore this whole else-if branch is evaluated as true. See MDN for more details.
I am trying to show a field, which is hidden, but shows up when 2 previous fields are filled.
$('#planner-locatie-ehv').change(function() {
if ($("#planner-locatie-ehv").val() == "Requirement1" && $("#planner-stad").val() == "Requirement2") {
$("#hideentertainment").show();
}
else {
$("#hideentertainment").hide();
}
});
But the field which is called #hideentertainment won't show up, although the previous fields has Requirement1 and Requirement2, when i use the OR statement ||, it does work, when 1 value is filled in it shows up. How can i make this possible?
You need to listen on both elements, not just the first one.
$('#planner-locatie-ehv, #planner-stad').change(function() {
var isValid = $("#planner-locatie-ehv").val() == "Requirement1" && $("#planner-stad").val() == "Requirement2";
$("#hideentertainment").toggle(isValid);
});
#dandavis is correct. It's only watching the first one for change. You can add the other to your selector to fix it.
$('#planner-locatie-ehv, #planner-stad').change(function() {
if ($("#planner-locatie-ehv").val() == "Requirement1" && $("#planner-stad").val() == "Requirement2") {
$("#hideentertainment").show();
}
else {
$("#hideentertainment").hide();
}
});
I want to check if my application's buttons are pressed or not. The error I face is, even when the buttons are clicked all the alerts display. Attached is the code snippet, the variables are set by click of buttons.
I want the alert not to display if any of the values are selected,
var condition ;
var clickable; // GLOBAL VARIABLES
function clickMe1()
{
clickable = "Sell";
}
function clickMe2()
{
clickable = "Rent";
}
function condition1()
{
condition="Excellent"
}
function condition2()
{
condition="Good"
}
function condition3()
{
condition="Fair"
}
function condition4()
{
condition="New"
}
function display()
{
if (condition != "Excellent"||"New"||"Fair"||"Good")
{
alert( " Please enter the condition ");
}
if (clickable != "Sell"||"Rent")
{
alert("Please enter the Sell");
}
if (costSell === '')
{
alert("Please select a Price ");
}
if ((condition === "Excellent"||"New"||"Fair"||"Good") && (clickable === "Selling"||"leasing")&&(!isNaN(costSell)))
{
// Do Something
},
error: function(data){
console.log("not added");
}
});
}
else
{
alert(" price is not a number");
}
}
I also tried:
if(condition !='Excellent'|| condition!='New' || condition!='Fair'|| condition!='Good')
{
alert( " Please enter the condition ");
}
if (clickable !='Sell'||'Rent' )
{
alert("Please enter the Sell ");
if(condition !='Excellent'|| condition!='New' || condition!='Fair'|| condition!='Good')
should be
if (condition != 'Excellent' && condition != 'New' && condition != 'Fair' && condition != 'Good')
because your version triggers if the condition is any one of Excellent, New, Fair, or Good. The corrected line triggers when the condition is not one of those.
And
if (clickable !='Sell'||'Rent' )
should be
if (clickable !='Sell' && clickable !='Rent' )
because you can't make that shortcut of only using clickable once.
condition !="Excellent"||"New"||"Fair"||"Good"
Conditions like this are your problem.
condition !="Excellent" && condition != "New" ...
^The solution
Your problem is you're testing multiple conditions without repeating the left-hand operand.
For example:
condition !="Excellent"||"New"||"Fair"||"Good"
It should be this:
condition != "Excellent" || condition != "New" || condition != "Fair" || condition !="Good"