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;
}
}
Related
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');
}
I want to test the extension of a given file
JS
function get_extension(file_name) {
return file_name.split('.').pop();
}
function check_file_type(file) {
switch(get_extension(file)) {
case 'jpg': case 'gif': case 'png':
var element = document.getElementById('p');
element.innerHTML = "Je suis une image";
break;
case 'mp4' :
var element = document.getElementById('p');
element.innerHTML = "Je suis une video";
}
}
HTML
<button onclick="check_file_type(<%=(chemin_photo1)%>)">Click me!</button>
<p id="p"></p>
But it will show nothing, thank you in advance
I suppose chemin_photo1 is a string, not the name of a global variable, so you'll need to wrap it in quotes
<button onclick="check_file_type('<%=(chemin_photo1)%>')">Click me!</button>
You should consider a few things here.
First what comes from the server. As #Frederico suggested, it must be quoted as it is supposed to be a file name (string)
<button onclick="check_file_type('<%=(chemin_photo1)%>')">Click me!</button>
Next, you must always check what the value of the argument passed is. It should be at the beginning of the function or as a default in your case block because even if you have quoted the server output it could still be an empty string ('') and in your case, it'd seem not working.
function check_file_type(file) {
var element = document.getElementById('p');
switch(get_extension(file)) {
case 'jpg': case 'gif': case 'png':
element.innerHTML = "Je suis une image";
break;
case 'mp4' :
element.innerHTML = "Je suis une video";
break;
default:
element.innerHTML = "oh-la-la!";
break;
}
}
I'm a beginner at JavaScript. I'm sorry if I cannot explain clearly what I need.
I am trying to design a page with some questions. The answers must be typed in a textbox.
I am using a Switch Statement to generate different comments to all acceptable answers.
As for answers that are not accepted, I would like to have more than the default message.
For example, if the user types an unaccepted answer for the first time, a message will show up, like "That is not an acceptable answer". On the user's second unaccepted answer a different message would show up, like "Please try again"... And so on for about five times, and then it would loop back to the first default message.
I just don't know how to make that happen...
This is what I have so far:
function myFunction() {
var text;
var colors = document.getElementById("myInput").value;
switch (colors) {
case "White":
text = "White is a nice color.";
break;
case "Blue":
text = "I also like blue. It reminds me of the ocean.";
break;
case "Red":
text = "Red is also nice.";
break;
default:
text = "That is not an acceptable answer";
}
document.getElementById("comment").innerHTML = text;
}
<p>What is your favorite color from the USA flag?</p>
<input id="myInput" type="text">
<button onclick="myFunction()">Answer</button>
<p id="comment"></p>
You need to have an array for the number of messages, the user needs to get when they have sent an answer.
var count = 0;
var messages = ["That is not an acceptable answer.", "Please try again!", "Still wrong.", "I don't understand.", "Consider visiting the 'help page' before moving on."];
Based on that count, show the message in the default case.
default:
text = messages[count%messages.length];
count++;
Full Working Snippet
var count = 0;
var messages = ["That is not an acceptable answer.", "Please try again!", "Still wrong.", "I don't understand.", "Consider visiting the 'help page' before moving on."];
function myFunction() {
var text;
var colors = document.getElementById("myInput").value;
switch (colors) {
case "White":
text = "White is a nice color.";
break;
case "Blue":
text = "I also like blue. It reminds me of the ocean.";
break;
case "Red":
text = "Red is also nice.";
break;
default:
text = messages[count%messages.length];
count++;
}
document.getElementById("comment").innerHTML = text;
}
<p>What is your favorite color from the USA flag?</p>
<input id="myInput" type="text">
<button onclick="myFunction()">Answer</button>
<p id="comment"></p>
var counter = 0;
function myFunction() {
var text;
var colors = document.getElementById("myInput").value;
switch(colors) {
case "White":
text = "White is a nice color.";
break;
case "Blue":
text = "I also like blue. It reminds me of the ocean.";
break;
case "Red":
text = "Red is also nice.";
break;
default:
text = getText(counter++);
}
counter = counter > 5 ? 0 : counter;
document.getElementById("comment").innerHTML = text;
}
function getText(counter) {
switch(counter):
case 1:
return "some text";
case 2:
return "some text";
...
}
I have my JSON file and it is just an object not any array.
{"name":"Autogen Program","start":"2014-05-04","end":"2014-10-12","status":"Completed"}
I am trying to assign value from JSON into HTML but I am unable to do so
$(function() {
$.getJSON('http://localhost:8080/GChartServlet/data1.json', function(statusDataSet) {
$.each(statusDataSet, function(i) {
var color;
switch(i.status) {
case "In Progress":
color = "yellow";
break;
case "Pending" :
color = "red";
break;
case "Completed" :
color = "green";
break;
}
if(i.name=="Autogen Program") {
$("#stat1").append(i.status).css('background-color', color);
}
});
});
HTML Code :--
<tr>
<form action="status1.asp">
<td>
<textarea readonly style="overflow:hidden" id="stat1" cols="12" rows="1" autofocus >
</textarea>
</td>
</form>
Can you please help me with same or suggest me where I am going wrong ?
Regards,
If you want to stick to your $.each than you need to make sure the returned result is an array:
statusDataSet = (statusDataSet instanceof Array) ? statusDataSet : [statusDataSet];
And $.each(function(i)) should be $.each(function(i, item)) because your i is the index not the item (object)
Hope that helps
http://jsfiddle.net/bv1br9tL/
If your JSON isn't a array, then you don't need the $.each loop. Just leave it out:
$(function() {
$.getJSON('http://localhost:8080/GChartServlet/data1.json', function(statusDataSet) {
var color;
switch(statusDataSet.status) {
case "In Progress":
color = "yellow";
break;
case "Pending" :
color = "red";
break;
case "Completed" :
color = "green";
break;
}
if(statusDataSet.name=="Autogen Program") {
$("#stat1").append(statusDataSet.status).css('background-color', color);
}
}
});
SO this is my code so far:
JS:
<script type="text/javascript">
function Hide(srcField)
{
var x = srcField.getAttribute('name');
var string = new RegExp("hide_ID",'gi');
switch (x)
{
case "1":
var dataRows= document.getElementsByID("obrazovanje");
alert (dataRows[0].innerHTML);
dataRows[0].className.replace('',string);
break;
case "2":
var dataRows= document.getElementsByID("rad_iskustvo");
dataRows[0].className.replace('',string);
break;
case "3":
var dataRows= document.getElementsByID("strani_jezici");
dataRows[0].className.replace('',string);
break;
case "4":
var dataRows= document.getElementsByID("znanja_vjestine");
dataRows[0].className.replace('',string);
break;
case "5":
var dataRows= document.getElementsByID("osobine_interesi");
dataRows[0].className.replace('',string);
break;
}
}
</script>
CSS:
.hide_ID,
{
display:none
}
HTML:
<a name="1"><h4><span name="1" onmouseover="Hide(this)">OBRAZOVANJE:</span></h4></a>
<div ID="obrazovanje">
<ul>
<li>2001.-2005. elektrotehnicar</li>
<li>2009.-2012. racunarstvo</li>
</ul>
</div>
the idea is that i want to hide the div block when i hover over the title that's in h4, but it doesn't seem to hide it... any ideas?
i started using replace but it still didn't work, before that it was just 'dataRows[0].className = "hide_ID"' but that didn't work either.
EDIT1:
so i changed the JS to:
var x = srcField.getAttribute('name');
switch (x)
{
case "1":
var dataRow= document.getElementByID("obrazovanje");
dataRow.className += "hide_ID";
break;
the rest of the JS is also edited, but i didn't feel the need to paste it all)
but still no result.
also tried to change display:none to display:block but now results.
EDIT2:
the JS now looks like this:
function Hide(id)
{
switch (id)
{
case "obrazovanje":
var dataRow= document.getElementByID("obrazovanje");
if ( dataRow.className.indexOf('hide_ID') == -1 ) dataRow.className += ' hide_ID';
else dataRow.className = 'obrazovanje';
break;
...
and the html is:
<a name="1"><h4 class="menu" onmouseover="Hide('obrazovanje')">OBRAZOVANJE:</h4></a>
<div ID="obrazovanje" class="content">
<ul>
<li>2001.-2005. elektrotehnicar</li>
<li>2009.-2012. racunarstvo</li>
</ul>
</div>
and still it wont budge...
FINAL:
this worked:
JS:
<script type="text/javascript">
function Hide(id)
{
switch (id) {
case 1:
document.getElementById("1").className = "hide_ID";
break;
case 2:
document.getElementById("2").className = "hide_ID";
break;
case 3:
document.getElementById("3").className = "hide_ID";
break;
case 4:
document.getElementById("4").className = "hide_ID";
break;
case 5:
document.getElementById("5").className = "hide_ID";
break;
}
}
function Show(id)
{
switch (id) {
case 1:
document.getElementById("1").className = "1";
break;
case 2:
document.getElementById("2").className = "2";
break;
case 3:
document.getElementById("3").className = "3";
break;
case 4:
document.getElementById("4").className = "4";
break;
case 5:
document.getElementById("5").className = "5";
break;
}
}
</script>
HTML:
<a name="1_a"><h4 class="menu" onmouseover="Hide(1)" onmouseout="Show(1)">OBRAZOVANJE:</h4></a>
<div ID="1" class="content">
<ul>
<li>2001.-2005. elektrotehnicar</li>
<li>2009.-2012. racunarstvo</li>
</ul>
</div>
CSS:
.hide_ID
{
display:none
}
thx guys.
Try this one. and change the switch case statement as per your requirement.
switch (x) {
case "1":
document.getElementById("obrazovanje").className += "hide_ID";
break;
case "2":
document.getElementById("rad_iskustvo").className += "hide_ID";
break;
case "3":
document.getElementById("strani_jezici").className += "hide_ID";
break;
case "4":
document.getElementById("znanja_vjestine").className += "hide_ID";
break;
case "5":
document.getElementById("osobine_interesi").className += "hide_ID";
break;
}
with this style
.hide_ID
{
display:none;
}
As I understand, your goal is to hide the associated div tag when the h4 element is hovered over. One way to do this is to use a combination of javascript, css and naming conventions. Consider...
<script type="text/javascript">
function Hide(id) {
var elt = document.getElementById('obrazovanje');
if ( elt.className.indexOf('hide_ID') == -1 ) {
elt.className += ' hide_ID'; // from your css example
} else {
elt.className = '';
}
}
/* In jQuery as mentioned in other answers it's even easier (and offers some other cool ways too (highly recommended if it fits your purposes) */
function jHide(id) {
$('#' + id ).toggleClass('hide_ID');
}
</script>
<h4 class="menu" onmouseover="Hide('obrazovanje');">obrazovanje</h4>
...
<div id="obrazovanje" class="content">
</div>
instead of replacing className with a reg exp try appending new class to className string.
Also getElementById() returns single html instance. And also id attribute must be unique for the entire document.
var dataRows= document.getElementById("obrazovanje");
dataRows.className += " hide_ID"
if you can use jQuery, just use $("#divname").addClass("hide_ID");