Image change with status change - javascript

Trying to get the door's image to change from a closed door svg image to an open door svg image
when the status goes from closed to open in my home automation dashboard. Seeking help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<!-- Add font from Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<!-- Link CSS style sheet to html document -->
<link rel="stylesheet" href="style.css">
<!-- Link JavaScript file to html document -->
<script src="mqttws31.js"></script>
<script src="dashboard.js"></script>
</head>
<body>
<div class="header">
<h1>Home Automation Dashboard</h1>
</div>
<hr>
<div id="messages"></div>
<div id="status"></div>
<hr>
<ul class="dashboard">
<li class="dashboard_item kitchen">
<h4>Kitchen</h4>
<img src="./moon.svg" width="40px" id="toggle-img" height="40px" alt="">
<p id="kitchen-light">OFF</p>
<button id="kitchen-btn">Toggle</button>
</li>
<li class="dashboard_item frontdoor" >
<h4>Front Door</h4>
<img src="./door-closed.svg" width="40px" id="toggle-img6" height="40px" alt="">
<p id="frontdoor-door">CLOSED</p>
</li>
</ul>
</body>
</html>
This is what I've been trying in javascript:
function togglefrontdoor() {
var status = document.getElementById("frontdoor-door").innerHTML;
if (status === "CLOSED")
document.getElementById('toggle-img6').innerHTML = './door-closed.svg';
else if (status === "OPEN")
document.getElementById('toggle-img6').innerHTML = './door-open.svg';
}

Here the example which toggle the image button by reusing part of your element.
Click the Toggle button to switch the svg.
Your togglefrontdoor() is not really functioning well because the content of toggle-img6 is always CLOSED, you need to update it as well while updating the svg.
Or maybe you have another function that call togglefrontdoor() like, I don't know
function toggleStatus() {
// changing status ...
...
togglefrontdoor();
}
But anyhow, I modify your togglefrontdoor() function just to make the example works.
Happy coding!
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" width="40px" id="toggle-img6" height="40px" alt="">
<p id="frontdoor-door">CLOSED</p>
<button id="toggle-btn" onclick="togglefrontdoor()">Toggle</button>
<script>
function togglefrontdoor() {
var frontdoor = document.getElementById("frontdoor-door");
var img6 = document.getElementById('toggle-img6');
var status = frontdoor.innerHTML;
if (status === "CLOSED") {
img6.src = 'https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg';
frontdoor.innerHTML = 'OPEN';
} else if (status === "OPEN") {
img6.src = 'https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg';
frontdoor.innerHTML = 'CLOSED';
} else {
// coding ...
}
}
</script>

<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" width="40px" id="toggle-img6" height="40px" alt="">
<p id="frontdoor-door">CLOSED</p>
<button id="toggle-btn" onclick="togglefrontdoor()">Toggle</button>
<script>
function togglefrontdoor() {
var frontdoor = document.getElementById("frontdoor-door");
var img6 = document.getElementById('toggle-img6');
var status = frontdoor.innerHTML;
if (status === "CLOSED") {
img6.src = 'https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg';
frontdoor.innerHTML = 'OPEN';
} else if (status === "OPEN") {
img6.src = 'https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg';
frontdoor.innerHTML = 'CLOSED';
} else {
// coding ...
}
}
</script>

Related

JS click event listener only works once and not with the expected if statement

I'm using a library for comparing different photos, like a "before and after" sort of thing, where they're displayed one on top of the other and there's a button in the center that you can drag left or right to see the differences.
Now, what I'm trying to do is implement two buttons - one on the left of the picture and one on the right.
When you click these buttons, I want the photos to change with the previous two or the next two.
I made an if statement for the buttons, but they don't work properly, although I don't notice any obvious error.
HTML code
<div id="wrapper">
<div class="arrowsContainer">
<div id="leftArrow">
<p>Left</p>
</div>
</div>
<div class="cd-image-container">
<img src="" id="originalImage" alt="Original Image">
<div class="cd-resize-img">
<img src="" id="modifiedImage" alt="Modified Image">
</div>
<span class="cd-handle"></span>
</div>
<div class="arrowsContainer">
<div id="rightArrow">
<p>Right</p>
</div>
</div>
</div>
JavaScript code
let originalImage = document.querySelector('#originalImage');
let modifiedImage = document.querySelector('#modifiedImage');
document.querySelector('#leftArrow').addEventListener("click", function(){
if ((modifiedImage.src = "img/3.jpg") && (originalImage.src = "img/4.jpg")){
modifiedImage.src = "img/1.jpg";
originalImage.src = "img/2.jpg";
}
});
document.querySelector('#rightArrow').addEventListener('click', function(){
if ((modifiedImage.src = "img/1.jpg") && (originalImage.src = "img/2.jpg")){
modifiedImage.src = "img/3.jpg";
originalImage.src = "img/4.jpg";
}
if ((modifiedImage.src = "img/3.jpg") && (originalImage.src = "img/4.jpg")){
modifiedImage.src = "img/5.jpg";
originalImage.src = "img/6.jpg";
}
if ((modifiedImage.src = "img/5.jpg") && (originalImage.src = "img/6.jpg")){
modifiedImage.src = "img/7.jpg";
originalImage.src = "img/8.jpg";
}
});
Right now, if I open the page, photos 1 & 2 are shown. If I click on the "right" button, it will display pics 7 & 8, and from there, if I click on the "left" button it will display pics 1 & 2 again, although the condition I have on the "left" button doesn't even include the scenario where you're at pics 7 & 8.
Please help, I really don't understand what's happening
I think what you are trying to achieve is that, when you click on the right button you want to show the next two images and when you click on the prev button you want to show the previous two images. If that's the case then you can check my solution.
Here is the js file.
let originalImage = document.querySelector("#originalImage");
let modifiedImage = document.querySelector("#modifiedImage");
const totalImages = 8;
let currentCount = 0;
document.querySelector("#leftArrow").addEventListener("click", function() {
currentCount = (currentCount - 2 + totalImages) % totalImages;
originalImage.src = `./img/${currentCount + 1}.jpg`;
modifiedImage.src = `./img/${currentCount + 2}.jpg`;
});
document.querySelector("#rightArrow").addEventListener("click", function() {
currentCount = (currentCount + 2) % totalImages;
originalImage.src = `./img/${currentCount + 1}.jpg`;
modifiedImage.src = `./img/${currentCount + 2}.jpg`;
});
And here is the .html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- <div class="container">Item</div> -->
<div id="wrapper">
<div class="arrowsContainer">
<div id="leftArrow">
<p>Left</p>
</div>
</div>
<div class="cd-image-container">
<img src="./img/1.jpg" id="originalImage" alt="Original Image" />
<div class="cd-resize-img">
<img src="./img/2.jpg" id="modifiedImage" alt="Modified Image" />
</div>
<span class="cd-handle"></span>
</div>
<div class="arrowsContainer">
<div id="rightArrow">
<p>Right</p>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
let originalImage = document.querySelector("#originalImage");
let modifiedImage = document.querySelector("#modifiedImage");
const totalImages = 8;
let currentCount = 0;
document.querySelector("#leftArrow").addEventListener("click", function() {
currentCount = (currentCount - 2 + totalImages) % totalImages;
originalImage.src = `https://i.picsum.photos/id/${currentCount + 1}/200/300.jpg`;
modifiedImage.src = `https://i.picsum.photos/id/${currentCount + 2}/200/300.jpg`;
});
document.querySelector("#rightArrow").addEventListener("click", function() {
currentCount = (currentCount + 2) % totalImages;
originalImage.src = `https://i.picsum.photos/id/${currentCount + 1}/200/300.jpg`;
modifiedImage.src = `https://i.picsum.photos/id/${currentCount + 2}/200/300.jpg`;
});
#wrapper {
display: flex;
}
.cd-image-container {
display: flex;
}
#leftArrow,
#rightArrow {
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- <div class="container">Item</div> -->
<div id="wrapper">
<div class="arrowsContainer">
<div id="leftArrow">
<p>Left</p>
</div>
</div>
<div class="cd-image-container">
<img src="https://i.picsum.photos/id/1/200/300.jpg" id="originalImage" alt="Original Image" />
<div class="cd-resize-img">
<img src="https://i.picsum.photos/id/2/200/300.jpg" id="modifiedImage" alt="Modified Image" />
</div>
<span class="cd-handle"></span>
</div>
<div class="arrowsContainer">
<div id="rightArrow">
<p>Right</p>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Use == or === in if statement
Give this a shot
if ((modifiedImage.src == "img/1.jpg") && (originalImage.src == "img/2.jpg")){
modifiedImage.src = "img/3.jpg";
originalImage.src = "img/4.jpg";here

When I rendering my template I would like to display a function of eventHandler

I made a templating with handlebars, so now my problem is simple :
When user put a letter or words or something else in the input field, the function launch the ajax call and he return the result.
But, I think, I took the problem upside down.
So if you would like to help me, you can check the code :
import Handlebars from 'handlebars'
export default class Templating {
constructor() {
this._grabDom();
this._addListener();
this._getData();
this._putData();
}
/* PRIVATE METHODS */
_createBounds() {
['_getData', '_putData', '_prevent']
.forEach((fn) => this[fn] = this[fn].bind(this));
}
_putData() {
for (let i = 0; i < this._parsing.search.length; i++) {
let compiledTemplate = Handlebars.compile(this._dom.cardsTemplate);
let generated = compiledTemplate(this._parsing.search[i]);
this._dom.cardsContainer.innerHTML += generated
}
}
_getData() {
let req = new XMLHttpRequest();
req.open('GET', 'http://joibor.fr/api/search.json', false);
req.send(null);
if (req.status === 200) {
this._parsing = JSON.parse(req.responseText);
}
}
_prevent(pEvt) {
if (pEvt.keyCode === 13) {
pEvt.preventDefault();
this._value = pEvt.target.value;
}
}
/* END PRIVATE METHODS */
/* PUBLIC METHODS */
/* END PUBLIC METHODS */
/* EVENT HANDLER */
_addListener() {
this._dom.searchInput.addEventListener('keydown', this._prevent)
}
/* END EVENT HANDLER */
/* GRAB DOM */
_grabDom() {
this._dom = {};
this._dom.cardsTemplate = document.querySelector('#cards-template').innerHTML;
this._dom.cardsContainer = document.querySelector('.section-bottom__template');
this._dom.searchInput = document.querySelector('.js-search-input');
}
/* END GRAB DOM*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Search</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="section-top">
<form class="form">
<label class="form__label" for="">Lieux</label>
<input type="text" class="form__input js-search-input" placeholder="...">
</form>
</div>
<section class="section-bottom">
<h2 class="section-bottom__title">Les membres qui se trouvent à Reims</h2>
<div class="section-bottom__template"></div>
<script id="cards-template" type="text/x-handlebars-template">
<div class="cards">
<div class="cards__position">
<img class="cards__image" src="{{image}}" alt="profil 1">
<div class="cards-content">
<div class="about about--flex">
<p class="about__name">{{name}}</p>
<p class="about__city">{{city}}</p>
</div>
<div class="text">
<p class="text__content"><span class="text__content__cat">Disponible : </span> {{start}} <span class="text__content__cat">au</span> {{end}}</p>
</div>
<div class="place">
<p class="place__content"><span class="place__content__cat">Nombre max de voyageurs : </span> {{max}}</p>
</div>
</div>
</div>
</div>
</script>
</section>
<script src="js/script.js"></script>
</body>
</html>
Actually, the templating works but not the search I can't solved this problem.

Navigation between pages - html

I trying to navigate between 3 pages which contain the same header and footer but each page has different content.
I want to load different contents html on hash change.
The problem is that when I click on the same page again, the content.html loaded again.
How can I use the content without loading the html again and again, using java script/html/jquery?
Code example:
Navigationbar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigation Bar</title>
<link rel="stylesheet" type="text/css" href="css/navigationbar.css">
</head>
<body>
<nav>
<img id="navigation-bar-logo" class="logo" src='images/flybryceLogo.png'>
<ul class="navigation-bar-ul">
<li class="navigation-bar-li"><a id="navigation-bar-contact-page-tab" href="#contact.html">CONTACT</a></li>
<li class="navigation-bar-li"><a id="navigation-bar-about-us-page-tab" href="#aboutus.html">ABOUT US</a></li>
<li class="navigation-bar-li"><a id="navigation-bar-home-page-tab" href="#home.html">HOME</a></li>
</ul>
</nav>
</body>
</html>
initial.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>One Page Test</title>
<link rel="stylesheet" type="text/css" href="css/homepage.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id="main-container" class="main-container">
<div id="header" class="header">
</div>
<div id="content" class="content"></div>
<div id="footer" class="bot"></div>
</div>
<script>
document.onreadystatechange = function(){
if (document.readyState == 'complete') {
window.onhashchange=hash_change;
window.onload=hash_change;
if(window.location.hash==''){
//default hash
window.location.replace('#home.html');
}
//load the header
$("#header").load("fragments/navigationbar.html");
//load the footer
$("#footer").load("fragments/footer.html");
}
}
function hash_change()
{
//get the new hash
var newHashCode = window.location.hash.substring(1);
if (newHashCode === "home.html"){
$("#content").load("home.html");
} else if (newHashCode === "aboutus.html") {
$("#content").load("aboutus.html");
} else if (newHashCode === "contact.html"){
$("#content").load("contact.html");
}
}
</script>
</body>
</html>
A longer but suitable solution would be to build a content cache on your own.
For example asking to the server just once the html and then setting it to the $('#content') element. You can use this helper function.
var contentsCache = {};
var getAndCache = function(url, callback) {
var cachedContents = contentsCache[url];
if (!cachedContents) {
$.get(url, function(serverContents) {
cachedContents = serverContents;
contentsCache[url] = cachedContents;
callback(cachedContents);
});
} else {
callback(cachedContents);
}
};
And then replace the $('#content').load calls by calls to this new asynchronous way.
function hash_change()
{
var fillContentCb = function(s) {
$('#content').html(s);
};
//get the new hash
var newHashCode = window.location.hash.substring(1);
if (newHashCode === "home.html"){
getAndCache("home.html", fillContentCb);
} else if (newHashCode === "aboutus.html") {
getAndCache("aboutus.html", fillContentCb);
} else if (newHashCode === "contact.html"){
getAndCache("content.html", fillContentCb);
}
}
As suggested in some comments, consider using native HTML navigation instead. Another suggestion is to use a client-side JS framework which supports routing if this application is likely to grow.
Add an if condition that checks whether the current hash location matches with the one that's been clicked on, and if it does just return. You'd have to store it in a global JS variable, and set it every time you navigate.

JQuery.SlideToggle() isn't functioning

<%# Master Language="C#" AutoEventWireup="true" CodeBehind="MainDesign.master.cs" Inherits="Web_Assignment.MainDesign" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Master Design</title>
<link href="stylesheets/mainstyle.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" type="image/x-icon" href="images/de_tour_ico.ico" />
<script>
var slide = function (div) {
if ($(div).css('display') === 'none') {
$(div).delay(300).slideToggle(500);
return false;
} else {
$(div).delay(300).slideToggle(500);
return false;
}
}
</script>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="logobox">
<img class="bottom" src="images/de_tour_hover.png" />
<img class="top" src="images/de_tour.png" />
</div>
<div class="searchdiv">
</div>
</div>
<div class="sidebar">
Login
<div id="div1" style="display: none">
this will show
</div><hr />
<ul>
<li onclick="location.href='#'">Home</li>
<li onclick="location.href='#'">About</li>
<li onclick="location.href='#'">Gallery</li>
<li onclick="location.href='#'">Contact</li>
</ul>
</div>
<div class="container"><asp:ContentPlaceHolder ID="ContentPlaceHolder" runat="server"></asp:ContentPlaceHolder></div>
</div>
</body>
</html>
I wonder why it wouldn't toggle the slides down whenever I clicked "Login"? Been searching and trying to sort this out for days.
I wanted to add a id: and password: inside the slided-div and possibly to hide it back whenever "Login" clicked again.
make sure include jQuery library first! and change the jquery code like below.
<script type='text/javascript'>
function slide(div) {
if ($(div).is(':hidden')) {
$(div).delay(300).slideToggle(500);
return false;
} else {
$(div).delay(300).slideToggle(500);
return false;
}
}
</script>
you can see the demo here ---> http://jsfiddle.net/Junkie/36ueV/
her for you:
http://jsfiddle.net/2EqCT/
Like you can see, the toggle work fine
Dont't forget to add the jquery lib ;)
$('a#foryu').click( function() { slide('#div1'); return false; } );
function slide(div) {
console.log("test");
if ($(div).css('display') === 'none') {
$(div).slideToggle(500);
return false;
} else {
$(div).slideToggle(500);
return false;
}
}
and please :) think about make the call of the function from your js code and not from the html tag
(JavaScript function in href vs. onclick)

Javascript Show/Hide elements, why isn't this code working?

So, as you can see I amusing javascript to show/hide elements, however when you click the .png it shows the text but does not hide the other element's text. I have been going over and over this script and Google searching the hell out of it and I cannot come up with an answer. I think I need another pair of eyes, so if anyone takes a look at this let me know if there are errors or if I'm missing some code.
<html>
<head>
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="NKit.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display = 'block';
}
function hideStuff(id) {
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body>
<div class="content">
<section class="left">
<p>
<img src="character1.png" id="char1" />
</p>
<p>
<img src="character2.png" id="char2" />
</p>
</section>
<section class="right">
<span id="character1" style="display: none;">Show character1 information</span>
<span id="character2" style="display: none;">Character 2 information</span>
</section>
</div>
</body>
</html>
<a href="#" onclick="showStuff('character1');" onclick="hideStuff('character2');">
On this line, you first set the property onclick to showStuff('character1'), then you reassign it to hideStuff('character2').
So, you should wrap these two function calls into one function and then assign that function to onclick.
onclick="function() { showStuff('character1'); hideStuff('character2'); }

Categories

Resources