Develop Reference

how can i swap between two icons?

I'm new to JavaScript and i'm making a weather app it works fine but the issue is in the icons when i type another country to see the weather, the new country icon goes on top of the previous country icon and i want to hide the previous icon and show the new one i tried the if statement and switch case method but it didn't work
here is my html code:
<form>
<input class="input" type="text" placeholder="type your country">
</form>
<button class="button">SUBMIT</button>
<div class="location">
<h1 class="timezone">TIMEZONE</h1>
<div id="icons" class="">
<img id="cloud" class="hide" src="./gifs/cloud.png">
<img id="clouds" class="hide" src="./gifs/clouds.png">
<img id="cloudy" class="hide" src="./gifs/cloudy.png">
<img id="rain" class="hide" src="./gifs/rain.png">
<img id="snowflake" class="hide" src="./gifs/snowflake.png">
<img id="storm" class="hide" src="./gifs/storm.png">
<img id="sun" class="hide" src="./gifs/sun.png">
<img id="wind" class="hide" src="./gifs/wind.png">
</div>
</div>
and here is my javascript code:
const temp = data.main.temp - 273.15 ;
const celsius = temp.toPrecision(3);
const descripiton = data.weather[0].description;
const name = data.name;
tempDeg.textContent = celsius;
tempDes.textContent = descripiton;
tmZn.textContent = name;
switch(descripiton){
case "mist" :
document.getElementById("wind").classList.remove("hide");
break;
case "clear sky" :
document.getElementById("sun").classList.remove("hide");
break;
case "broken clouds" :
document.getElementById("clouds").classList.remove("hide");
break;
case "shower rain" :
document.getElementById("rain").classList.remove("hide");
break;
case "thunderstorm" :
document.getElementById("storm").classList.remove("hide");
break;
case "snow" :
document.getElementById("snow").classList.remove("hide");
break;
case "few clouds" :
document.getElementById("cloudy").classList.remove("hide");
break;
case "scattered clouds" :
document.getElementById("cloud").classList.remove("hide");
break;
}

You need to hide everything using something like a for loop.
var icons = document.querySelector("#icons").children;
for (var i=0; i<icons.length; i++) {
icons[i].classList.add("hide");
}
Then remove the hide class from the one you wish to show as you have done in your code.

If you are showing only a single icon there is another approach than hiding all icons
var iconName = 'default'
switch(descripiton) {
case "mist" :
iconName = 'wind';
break;
case "clear sky" :
iconName = 'sun';
break;
case "broken clouds" :
iconName = 'clouds'
break;
// add rest of items here
}
document.getElementById("icons").innerHTML = '<img src="./gifs/' + iconName + '.png">';
If you want to keep your current approach first hide all icons and then make only the required icon visible
var images = document.getElementById('icons').querySelectorAll('img');
for (i = 0; i < images.length; i++){
images[i].classList.add('hide');
}
In your switch make the relevant item visible like this
document.getElementById("wind").classList.remove("hide");

Changing values of DIV buttons using javascript

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>

Javascript switch which shows new set of buttons

I am having trouble trying to make a switch in Javascript that when the switch activates, depending on the case, the program will display a number of new buttons which you can click and will play a sound.
This is my HTML and Javascript with the first set of buttons:
function selectchord(){
var userinput = document.getElementById("chord").value;
switch (userinput) {
case "a":
document.write("holas");
break;
}
}
function PlaySound(path) {
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', path);
audioElement.play();
}
<input type="text" id="chord"></input>
<button onclick="selectchord()">Select chord</button>
<p id="demo"></p>
<button id="bt" type="button"
onclick="javascript:PlaySound('sounds/Am.wav');">
A minor
</button>
<button id="bt" type="button"
onclick="javascript:PlaySound('sounds/Bm.wav');">
B minor
</button>
In the case above, I just put in the switch there to see if it worked. I am really new to Javascript so I apologise if I am not using the correct terminology.
Thanks in advance

There are a couple of issues in your code...
I do not know exactly your intentions, but I think you are trying to do something like this:
var button = document.getElementById('selectChord');
button.addEventListener('click', selectChord, false);
function selectChord() {
var userinput = document.getElementById("chord").value.toLowerCase(),
html = '';
switch (userinput) {
case "a":
html += '<button id="A" onclick="playSound(this.id)">A</button>';
html += '<button id="Am" onclick="playSound(this.id)">Am</button>';
break;
case "b":
html += '<button id="B" onclick="playSound(this.id)">B</button>';
html += '<button id="Bm" onclick="playSound(this.id)">Bm</button>';
break;
default:
html += '<p>Oops!</p>';
}
document.getElementById('buttons').innerHTML = html;
}
function playSound(id) {
console.log(id);
}
#buttons {
margin: 10px 0;
}
<input type="text" id="chord">
<button id="selectChord">Select chord</button>
<div id="buttons"></div>

javascript onmouseover hide a div block

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");

Mouseover script not working... Need help

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/