I need help with my "switch" code I want to validate the final string of a url to change a background by assigning a class and applying the corresponding CSS, it always returns the "default" case and does not apply to other cases with any URL.
var url_location = window.location.href;
switch (url_location) {
case window.location.href.indexOf('?osf_portfolio_type=Bodega'):
jQuery('.page-title-bar').addClass('propiedad-bodega');
break;
case window.location.href.indexOf('?osf_portfolio_type=Terreno'):
jQuery('.page-title-bar').addClass('propiedad-terreno');
break;
case window.location.href.indexOf('?osf_portfolio_type=Oficina'):
jQuery('.page-title-bar').addClass('propiedad-oficina');
break;
case window.location.href.indexOf('?osf_portfolio_type=Local+comercial'):
jQuery('.page-title-bar').addClass('propiedad-local-comercial');
break;
default:
jQuery('.page-title-bar').addClass('propiedades-site');
break;
}
Thank you for your help!
if (window.location.href.indexOf("?osf_portfolio_type=Bodega") > -1) {
jQuery('.page-title-bar').addClass('propiedad-bodega');
}
else if (window.location.href.indexOf("?osf_portfolio_type=Terreno") > -1) {
jQuery('.page-title-bar').addClass('propiedad-terreno');
}
else if (window.location.href.indexOf("?osf_portfolio_type=Oficina") > -1) {
jQuery('.page-title-bar').addClass('propiedad-oficina');
}
else if (window.location.href.indexOf("?osf_portfolio_type=Local+comercial") > -1) {
jQuery('.page-title-bar').addClass('propiedad-local-comercial');
}
else{
jQuery('.page-title-bar').addClass('propiedades-site');
}
this is a noob question:
I'm defining a button in HTML like this:
<div>
<input class="btn-change" type="button" value="Select good points" />
</div>
To avoid showing too many buttons I'd like the button to toggle between
value="Select good points"
and
value="Select bad points
So in javascript i'm using
$(".btn-change").on("click", function() {
alert("you pressed the " + nextMark + " button");
switch(nextMark) {
case "bad":
nextMark = "good"
document.getelementsbyclassname("btn-change").value="Select good points";
break;
case 'good':
nextMark = "bad"
$("btn-change").value = "Select bad points";
break;
}
}
The nextMark var changes the colour of marks placed on a leaflet map depending on the value of the button.
The alert shows the case structure is working but the button value isn't changing - what is the correct way of doing this?
jsfiddle right here
To assign a value to the input using JQuery you need to use .val() and not .value
var nextMark = "good";
$(".btn-change").on("click", function() {
switch (nextMark) {
case "bad":
nextMark = "good";
$(".btn-change").val("Select good points");
break;
case 'good':
nextMark = "bad";
$(".btn-change").val("Select bad points");
break;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input class="btn-change" type="button" value="Select good points" />
</div>
You need to specify index to document.getElementsByClassName("btn-change")[0].value = as 0
var nextMark = "good";
$(function(){
$(".btn-change").on("click", function() {
alert("you pressed the " + nextMark + " button");
switch(nextMark) {
case "bad":
nextMark = "good"
document.getElementsByClassName("btn-change")[0].value = "Select good points";
break;
case 'good':
nextMark = "bad"
document.getElementsByClassName("btn-change")[0].value = "Select bad points";
break;
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input class="btn-change" type="button" value="Select good points" />
</div>
First, you're missing an ending ); to close of the … .on("click" ….
If you are using jQuery, you need to remember to include that first (at the top in <head>), then you should define the JavaScript sheet later. Common practice is at the end, right before the </body> tag.
<script type="text/javascript" src="js.js"></script>
</body>
Next, for the alert, nextMark is not defined.
You can do that with this. when using jQuery, you should keep to it, so use $(this).
Put this inside the function to define nextMark:
var nextMark = $(this);
Once that is done, you need to get the value of it, unless it will say you pressed the [object Object] button. You do that by adding .val() at the end of the target with jQuery; so nextMark.val() inside the alert.
Now to make it switch, you could use a simple if-else statement to switch between the two with:
if (nextMark.val() == "Select good points") {
nextMark.val("Select bad points");
} else {
nextMark.val("Select good points");
}
If you want to use switch, then at least to make it work you need to give it what case it is. What goes inside the (…) of the switch is the case it will use to check.
If I put switch(x) and define x as var x = 1 or var x = "one, we will use this to decide which case to use:
case 1: or case "one": will be executed.
var x = 1;
var y = "one";
switch(y) {
case 1:
// "y" is not 1.
break;
case "one":
// "y" is "one", so this will be exectuted.
break;
}
Therefore, we need to define when the button is "good" or "bad". You could do this by using the literal value, like:
var myMark = $(this).val();
switch(myMark) {
case "Select bad points":
$(this).val("Select good points");
break;
case 'Select good points':
$(this).val("Select bad points");
break;
}
$(".btn-change").on("click", function() {
var nextMark = $(this);
alert("you pressed the " + nextMark.val() + " button");
/* Optional method: */
// if (nextMark.val() == "Select good points") {
// nextMark.val("Select bad points");
// } else {
// nextMark.val("Select good points");
// }
var myMark = $(this).val(); /* or var myMark = nextMark.val(); */
switch(myMark) {
case "Select bad points":
$(this).val("Select good points");
break;
case 'Select good points':
$(this).val("Select bad points");
break;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- jQuery included in this example to make it work -->
<div>
<input class="btn-change" type="button" value="Select good points" />
</div>
I have my script before the closing body tag so that´s not the problem and my picture have the right id. But when I use console.log(albumCover) I get null instead of the picture node.
<img id="album_cover" src="space-160x160.jpg" alt="Kalliope Image">
const albumCover = document.querySelector("#album_cover");
songPick.addEventListener("change", audioImageSource);
function audioImageSource() {
let option = document.querySelector("select").options;
let indexImageSong = document.querySelector("select").selectedIndex;
audio.src = songPick.value;
console.log(option[indexImageSong].index);
console.log(option[indexImageSong]);
switch (option[indexImageSong].index) {
case 0:
console.log(albumCover);
albumCover.src = 'space-160x160.jpg';
break;
case 1:
albumCover.src = 'friendly-alien-planet-160x160.jpg';
break;
case 2:
albumCover.src = 'Soundscape-music-160x160.jpg';
break;
case 3:
albumCover.src = 'soundscape-160x160.jpg';
break;
}
}
I have a switch statement that I am using in the drop down menus
I want to add html code in each of the cases like links,images, etc..
the header tag in the index.html
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" defer="defer">
function showDetails(){
var org = $("#org").attr("value");
var div1 = $("#div1");
switch(org)
{
case "1":
div1.html("this is all about organization 1");
break;
case "2":
div1.html("this is all about organization 2");
break;
case "3":
div1.html("this is all about organization 3");
break;
default:
div1.html("Select Organization");
}
$("#div2").fadeOut(300);
div1.fadeIn(300);
}
function TerritoryDetails(){
var terr = $("#terrSelect").attr("value");
var div = $("#div2");
div.fadeIn(300);
$("#div1").slideUp(300); //hide organization (optional)
switch(terr)
{
case "1":
div.html("this is all about Territory 2");
break;
case "2":
div.html("this is all about Territory 2");
break;
case "3":
div.html("this is all about Territory 3");
break;
case "4":
div.html("this is all about Territory 4");
break;
case "5":
div.html("this is all about Territory 5");
break;
case "6":
div.html("this is all about Territory 6");
break;
case "7":
div.html("this is all about Territory 7");
break;
default:
div.html("Select Territory");
}
}
function cascadeSelect(parent, child){
var childOptions = child.find('option:not(.static)');
child.data('options',childOptions);
parent.change(function(){
childOptions.remove();
child
.append(child.data('options').filter('.sub_' + this.value))
.change();
})
childOptions.not('.static, .sub_' + parent.val()).remove();
}
$(function(){
cascadeForm = $('.cascadeTest');
orgSelect = cascadeForm.find('.orgSelect');
terrSelect = cascadeForm.find('.terrSelect');
locSelect = cascadeForm.find('.locSelect');
cascadeSelect(orgSelect, terrSelect);
cascadeSelect(terrSelect, locSelect);
});
</script>
the full code is here
http://jsfiddle.net/5tmwg/5/
I lack experience in javascript and jQuery
thanks in advance
you are on the right path.
this is all about organization 1
you can replace those strings with html code for example
`div1.html("<p style='color:#0066cc'>this is all about organization 1<p>");`
Can someone try this and see if it works for you. I can't figure out the problem.. Maybe I have a conflict somewhere. Using jquery.
Thank you so much for the help.
<script type="text/javascript">
$(document).ready(function(){
$('a').mouseover(function() {
switch ($(this).attr('class')) {
case 'nc1':
new_content = 'Twitter';
break;
case 'nc2':
new_content = 'Facebook';
break;
case 'nc3':
new_content = 'Linked In';
break;
case 'nc4':
new_content = 'Flickr';
break;
case 'nc5':
new_content = 'RSS Feed';
break;
case 'cs1':
new_content = 'Email';
break;
case 'cs2':
new_content = 'Telephone';
break;
case 'cs3':
new_content = 'Live Chat';
break;
case 'cs4':
new_content = 'Skype';
break;
case 'cs5':
new_content = 'Google Voice';
break;
default:
new_content = 'The crusade to feed every orphan in the world';
break;
}
$('#ms').html(new_content)
}).mouseout(function() {
$('#ms').text('The crusade to feed every orphan in the world');
});});
</script>
<div id="ms">The crusade to feed every orphan in the world.</div>
<div id="nc_wrap2">
<a class="nc1" href="#"></a>
<a class="nc2" href="#"></a>
<a class="nc3" href="#"></a>
<a class="nc4" href="#"></a>
<a class="nc5" href="#"></a>
</div>
Works just fine if you put some content in your links ...
example at http://www.jsfiddle.net/x4Lm4/