Writing an if statement using jQuery's attr() - javascript

I'm a beginner with jQuery so is this code right? Also how can I call it when page loads?
I need to say if the skin is "white" change the website logo to the black logo.
if ($("#themestyle").attr('href', "/web/assets/css/skins/white.css")) {
$("#logo").attr('src', "/web/assets/images/LogoBlack.png");
} else {
$("#logo").attr('src', "/web/assets/images/Logowhite.png");
}
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<link rel="icon" href="/web/assets/images/favicon.ico">
<title>
<asp:Literal runat="server" Text="Test Website" />
</title>
<link rel="stylesheet" href="/web/assets/css/skins/blue.css" id="themestyle" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="navbar-brand">
<img src="/web/assets/images/Logowhite.png" id="logo" />
</div>
</body>

The issue is because you're using the setter of attr() in the if(). This sets the href attribute then returns a jQuery object containing the link element. When coerced to a boolean this will always return true.
To fix this use the getter of attr() and use == to compare it to the known href, like this:
var filename = 'LogoBlack.png';
if ($("#themestyle").attr('href') == "/web/assets/css/skins/white.css") {
filename = 'Logowhite.png';
}
$("#logo").attr('src', '/web/assets/images/' + filename);
Alternatively you can use a ternary expression. They're more succinct but, arguably, harder to read:
var filename = $("#themestyle").attr('href') == "/web/assets/css/skins/white.css" ? 'LogoBlack.png' : 'Logowhite.png';
$("#logo").attr('src', '/web/assets/images/' + filename);

Related

Saving a cookie for darkmode/lightmode JS - Issues

I am trying to make the cookie load when the body does, and then check what value it is. If darkmode = true, then it should display css/cssmain.css. If it is false, it should display css/csslight.css. The cookie works: If I use the button to switch from dark to light, it changes darkmode from true (dark) to light (false) and vice-versa. It even stays when I refresh the page, but the css switches to its default file.
Basically, I can not figure out how to make darkMode go into the if statement in my javascript. I tried it with onload="getCookie(darkMode)" to try and put the cookie darkMode's value (true or false) into the script. It seems to just not run the script, because even if I add an alert, the alert does not pop up when I use the button.
HTML:
<head>
<title>Freshwater Fish</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/cssmain.css">
<link rel="stylesheet" type="text/css" href="css/desktopview.css">
<link rel="stylesheet" type="text/css" href="css/mobile.css">
<link rel="stylesheet" type="text/css" href="css/slides.css">
<link id='css_theme' rel='stylesheet' type='text/css' href='css/csslight.css'>
<script src="js/fullstackfrog.js"></script>
</head>
<body onload="getCookie(darkMode)">
<button class="lightmodeButton" onclick="document.getElementById('css_theme').setAttribute('href', document.getElementById('theme').value, document.cookie = 'darkMode=true'); if (document.getElementById('theme').value == 'css/cssmain.css'){ document.getElementById('theme').value = 'css/csslight.css'; document.cookie = 'darkMode=true';} else{ document.getElementById('theme').value = 'css/cssmain.css'; document.cookie = 'darkMode=false';}">Light/Dark</button>
<input type="hidden" id="theme" value="css/cssmain.css">
</body>
</html>
JS (fullstackfrog.js):
function getCookie(name) {
if (name) {
document.getElementById('theme').value = 'css/cssmain.css';
}
else {
document.getElementById('theme').value = 'css/csslight.css';
}
}
Do you know how cookies work? document.cookie will just stay the same. You need to write something to get the cookie and parse the value from document.cookie. Try reading https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie and use the examples.

translate is not a function (in 'translate()', 'translate' is true)

I am trying to make a simple latin dictionary. I am new to JavaScript so I am trying to test the input tag with the alert function. In the console, I am receiving the error message after I click the "translate" button. Error: "translate is not a function (in 'translate()', 'translate' is true)".
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Latin Dictionary</title>
</head>
<h1 id="main-header">Latin Dictionary!</h1>
<body>
<input id="latin-word" placeholder="Latin to English"/>
<br />
<button onclick="translate()" id="btn-translate-latin-english">Translate</button>
<script type="text/javascript" src="translate.js"></script>
</body>
</html>
JavaScript:
function translate() {
var latinWord = document.getElementById("latin-word").value;
alert("word that was entered: " + latinWord);
}
Thank you in advance :)
To solve it, choose another function name, such as myTranslate().
Why you can't use translate()? Because there's already a built-in translate in HTML. See here.
Note: You can choose whatever you want.
JS Code:
function myTranslate() {
var latinWord = document.getElementById("latin-word").value;
alert("word that was entered: " + latinWord);
}
HTML:
<button onclick="myTranslate()" id="btn-translate-latin-english">Translate</button>
Let me know if it works.
I think this error is being called because you are using the script tag after the button tag. I think moving the script into the head of the html will solve the issue
You seem to use the function's name translate which is a reserved word in JavaScript.
translate is a global attribute to make elements translatable or movable.
You must rename the function to fix this error. I used Translate():
function Translate() {
var latinWord = document.getElementById("latin-word").value;
alert("Word that was entered: " + latinWord);
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Latin Dictionary</title>
</head>
<h1 id="main-header">Latin Dictionary!</h1>
<body>
<input id="latin-word" placeholder="Latin to English"/>
<br />
<button onclick="Translate()" id="btn-translate-latin-english">Translate</button>
<script type="text/javascript" src="translate.js"></script>
</body>
</html>

Function not changing image in gallery

I'm making an image gallery using vanilla JavaScript. I'm trying to make it so that clicking on a thumbnail will change the srcattribute in the img tag with the class gallery-highlight, updating the image shown to the user. But when I open my HTML file in Firefox and click on an image thumbnail, it does nothing. My JavaScript doesn't seem to be doing anything to the page. How can I fix this?
Here's what I've got:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width-device-width, initial-scale-1.0" />
<title>Image Gallery</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js"></script>
</head>
<body>
<img src="./efrain-big.jpg" class="gallery-highlight" alt="" />
<div class="room-preview">
<img src="./efrain-small.jpg" alt="" />
<img src="./heather-small.jpg" alt="" />
<img src="./jimmy-small.jpg" alt="" />
</div>
</body>
</html>
function imageGallery() {
const highlight = document.querySelector(".gallery-highlight");
const previews = document.querySelectorAll(".room-preview img");
previews.forEach(preview => {
preview.addEventListener("click", function() {
const smallSrc = this.src;
const bigSrc = smallSrc.replace('small', 'big');
highlight.src = bigSrc;
});
});
}
imageGallery();
I think the problem is with the way you organized your project. From what can i see ( the HTML code) you happen to have all the files in one folders. No subfolders for js and css. If that’s not the case you need to fix the src of js in the script tag .

Change image onclick using javascript

Here's my problem:
I am new to Javascript and I am trying to make my image change on click.
It's a simple counter game that does a 2 frame animation of squidward hitting the dab.
So far I have got the counter to work but I cannot get the image to change on click as well. Also, it's going to have to change back to the original image so that it can be clicked and counted again.
<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">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<button onclick="dabMan()"><img src="./squid-dab1.gif"> .
</button>
<br><br>
How many dabs??
<input type="text" id="text">
</div>
<script src="./script.js"></script>
</body>
</html>
var dabcount = 0;
function dabMan() {
dabcount = dabcount + 1
document.getElementById('text').value = dabcount;
console.log("dabMan", dabMan)
document.getElementById("./squid-dab1.gif") .src = "./squid-dab2.gif";
console.log("changeimage", dabMan)
}
instead of using the "onclick(){}" attribute in your html, write an event listener in js. Assuming your image tag is like this:
<img src='./squid-dab1.gif' id='myImage'>
Note: Javascript needs to know how to find your image... Hence the ID
Your javascript code should look like this:
<script>
var image = document.getElementById('myImage');
image.addEventListener('click', function(){
changeImage();
});
function changeImage(){
image.src = './squid-dab2.gif';
}
</script>
That will make it so that when you click the image, it will change. If you wanted a button to do that, simply create a button with the id "myImage" instead like so:
<button id='myImage'>Click me to change the picture</button>

Why won't the text inside <div> change, when it clearly should?

Why won't the text inside the tags change, when it clearly should change? Can anyone help?
Here is my HTML and JS code:
function pickStick(); {
weapon = "Stick";
weapondamage = 1;
document.getElementById("weapon").innerHTML = "Weapon: ";
}
And...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<br><br>
<div id="weapon">You see a stick. You can pick it up.</div>
</body>
</html>
You have a semicolon after your function name ( function pickStick(); ), you need to remove that:
function pickStick() {
weapon = "Stick";
weapondamage = 1;
document.getElementById("weapon").innerHTML = "Weapon: ";
}
Then you may want to remove the href from your <a> so it doesn't move to a new page, or replace it with href="#":
pick it up.
You need to update 2 things
JS update
Replace
function pickStick(); {
with
function pickStick() {
Markup update
Replace
<a href="" onclick="pickStick()">
with
<a href="#" onclick="pickStick()">
or
<a href="javascript:void(0);" onclick="pickStick()">
For reference - http://plnkr.co/edit/wu1y9OA1Ml1gQPCEQImB?p=preview
This works:
function pickStick() {
weapon = "Stick";
weapondamage = 1;
document.getElementById("weapon").innerHTML = "Weapon: ";
}
<div id="weapon">You see a stick. You can pick it up.
So the problem is probably due to you having a semi-colon in your function definition, or the missing pound sign (#) in your anchor.

Categories