how can i swap between two icons? - javascript

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

Related

Add paragraph (p) tag inside selected text execCommand("p")

How to add p (Paragraph) tag inside selected text like bold.
document.queryCommand("insertParagraph") is not working inside the code.
function makeBold() {
const state = document.queryCommandState("bold");
let message;
switch (state) {
case true:
message = "The bold formatting will be removed from the selected text.";
break;
case false:
message = "The selected text will be displayed in bold.";
break;
default:
message = "The state of the 'bold' command is indeterminable.";
break;
}
document.querySelector("#output").textContent = `Output: ${message}`;
document.execCommand('bold');
}
<div contenteditable="true">Select a part of this text!</div>
<button onclick="makeBold();">Test the state of the 'bold' command</button>
<hr>
<div id="output"></div>

How to swap order of html objects being displayed without changing the template?

I have a badge in my span that I only want to appear if case 3 in my getLatestSystemMessage function is selected. My code is working fine except the badge is appearing on the wrong message because angular is reading the span first then the {{getLatestSystemMessage(thread)}} therefore the badge that is showing is showing on the next message rather than the current message. How can I overcome this in the right way? I need the badge to appear before the latest system message
Here is my component.html
<p class="mb-0">
<span
class="badge badge-pill badge-success d-none"
[class.d-inline]="isAcceptedOffer">Accepted
</span>
<strong> {{getLatestSystemMessage(thread)}}</strong>
</p>
and here is my component.ts
getLatestSystemMessage(thread: Thread): string {
const message = thread.messages.slice().reverse().find(m => m.type !== 0);
const isUserOwner = thread.project.user.id === this.user.id;
let content = '';
this.isAcceptedOffer = false;
if (message) {
switch (message.type) {
case 1:
if (<any>message.content > 0) {
content = isUserOwner ?
`Offered you $${message.content}` :
`You offered $${message.content}`;
} else {
content = isUserOwner ?
`Offered to translate for free` :
`You offered to translate for free`;
}
break;
case 2:
content = isUserOwner ?
'Cancelled offer' :
'You cancelled your offer';
break;
case 3:
this.isAcceptedOffer = true;
content = isUserOwner ?
`Offered you $${message.content}`:
`You offered $${message.content}`;
break;
case 4:
content = isUserOwner ?
"You accepted another translator's offer" :
"Accepted another translator's offer";
break;
}
}
return content;
}
You could use CSS Order within a css class and then activate it programmatically with [ngClass] when your condition is satisfied.
This way if case 3 occurs, apply the class to all the elements whose order has to be changed. You can achieve this with just CSS, without altering the template.
The cleanest solution would be to change the template. Here's my suggestion:
<p class="mb-0">
<span
class="badge badge-pill badge-success d-none"
[class.d-inline]="isAcceptedOffer(thread)">Accepted
</span>
<strong> {{getLatestSystemMessage(thread)}}</strong>
</p>
isAcceptedOffer(thread: Thread): boolean {
const message = thread.messages.slice().reverse().find(m => m.type !== 0);
return (message?.type === 3);
}
getLatestSystemMessage(thread: Thread): string {
const message = thread.messages.slice().reverse().find(m => m.type !== 0);
const isUserOwner = thread.project.user.id === this.user.id;
let content = '';
if (message) {
switch (message.type) {
case 1:
if (<any>message.content > 0) {
content = isUserOwner ?
`Offered you $${message.content}` :
`You offered $${message.content}`;
} else {
content = isUserOwner ?
`Offered to translate for free` :
`You offered to translate for free`;
}
break;
case 2:
content = isUserOwner ?
'Cancelled offer' :
'You cancelled your offer';
break;
case 3:
this.isAcceptedOffer = true;
content = isUserOwner ?
`Offered you $${message.content}`:
`You offered $${message.content}`;
break;
case 4:
content = isUserOwner ?
"You accepted another translator's offer" :
"Accepted another translator's offer";
break;
}
}
return content;
}
If this cannot be done, I would probably go with Francesco's solution above.

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>

Set frame source of frame2 from button in frame1?

I have a HTML page which is divided into two frame sets,
the first frame contains 4 buttons, the second frame shows forms, only 1 of 4 forms can be shown according to which button is clicked.
e.g. if the user clicks on button 'form1' in frame1, the 2nd frame should show 'FORM1' if the user clicks on button 'frame3' in frame1, the 2nd frame should show 'FORM3'.
What I need is to be able to change the source of the form in the second frame based on the button clicked in the first frame.
Here is main frame file:
<html>
<head>
<title>User Management</title>
</head>
<frameset rows="9% ,91%" >
<frame src="buttons.php"
name='Frame1'
scrolling="no"
name="work_disply"
noresize="noresize" />
<frame src="form1.php"
name='Frame2'
scrolling="yes"
name="work_ground"
noresize="noresize" />
</frameset>
</html>
This should do what you need:
<a target="Frame2" href="form1.php">Show form 1</a>
<a target="Frame2" href="form2.php">Show form 2</a>
<a target="Frame2" href="form3.php">Show form 3</a>
<a target="Frame2" href="form4.php">Show form 4</a>
More about targets and frames in HTML 4 spec.
In frame1 that is in buttons.php your code for buttons should be like this
<input type="button1" value="button1"
onClick="parent.Frame2.location.href='Form1.php'">
</form>
<input type="button2" value="button2"
onClick="parent.Frame2.location.href='Form2.php'">
</form>
<input type="button3" value="button3"
onClick="parent.Frame2.location.href='Form3.php'">
</form>
<input type="button4" value="button4"
onClick="parent.Frame2.location.href='Form4.php'">
</form>
This will solve your problem...
Child (Frame1):
// Get Button Values & Pass to Parent
$(document).ready(function() {
$('#list-1').click(function() {
// alert($(this).attr("value"));
window.parent.fchanger($(this).attr("value"));
});
});
$(document).ready(function() {
$('#list-2').click(function() {
// alert($(this).attr("value"));
window.parent.fchanger($(this).attr("value"));
});
});
$(document).ready(function() {
$('#list-3').click(function() {
// alert($(this).attr("value"));
window.parent.fchanger($(this).attr("value"));
});
});
$(document).ready(function() {
$('#list-4').click(function() {
// alert($(this).attr("value"));
window.parent.fchanger($(this).attr("value"));
});
});
Parent File to set the 'src' of Frame1:
function fchanger(fname){
// alert("Welcome");
// document.getElementById("Frame2").src = 'form10.php' ;
switch (fname) {
case 'form1':
document.getElementById("Frame2").src = 'form1.php' ;
break;
case 'form2':
document.getElementById("Frame2").src = 'form2.php' ;
break;
case 'form3':
document.getElementById("Frame2").src = 'form3.php' ;
break;
case 'form4':
document.getElementById("Frame2").src = 'form4.php' ;
break;
case 'form5':
document.getElementById("Frame2").src = 'form5.php' ;
break;
case 'form6':
document.getElementById("Frame2").src = 'form6.php' ;
break;
case 'form7':
document.getElementById("Frame2").src = 'form7.php' ;
break;
case 'form8':
document.getElementById("Frame2").src = 'form8.php' ;
break;
case 'form9':
document.getElementById("Frame2").src = 'form9.php' ;
break;
case 'form10':
document.getElementById("Frame2").src = 'form10.php' ;
break;
case 'form11':
document.getElementById("Frame2").src = 'form11.php' ;
break;
default:
text = "Looking forward to the Weekend";
} }

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

Categories

Resources