Keydown only runs code once [duplicate] - javascript

This question already has answers here:
What are alternatives to document.write?
(11 answers)
Closed 8 years ago.
So I have a script that generates a hex code, and changes the background. Here's the code
$(document).ready(function() {
$(document).keydown(function(e) {
if (e.keyCode == '32') {
var color = "#" + Math.random().toString(16).slice(2, 8);
document.write(color);
document.body.style.backgroundColor = color;
}
});
});
The issue is when I press space, it only changes the color once, and I won't be able to press space again to generate another color without reloading the page. Here's a demo. Any ideas?

Do not use document.write.
it will wipe your script so you should append it in body:
$(document.body).append(color);
document.body.style.backgroundColor = color;
or add a span and set its text:
$("span").text(color);
UPDATED JSBIN

http://jsfiddle.net/EVjaH/
$(document).ready(function(){
$('body').on('keydown',function(e) {
if (e.which == '32') {
var color = "#" + Math.random().toString(16).slice(2, 8);
$('body').css('background',color);
}
});
});

Related

Why isn't onmouse over working with get by class name? [duplicate]

This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 2 years ago.
Im fairly new to JavaScript and i am attempting to make an onmouseover event change the color of an h1 tag to red, and changes it back to black onmouseout. I know there are much easier/simpler ways to achieve this with css, such as simply using hover styling, but i just want to understand WHY this isn't working in the first place when the syntax seems to be alright?
<h1 class="demo">Mouse over me</h1>
<script>
document.getElementsByClassName("demo").onmouseover = function() {mouseOver()};
document.getElementsByClassName("demo").onmouseout = function() {mouseOut()};
function mouseOver() {
document.getElementsByClassName("demo")[0].style.color = "red";
}
function mouseOut() {
document.getElementsByClassName("demo")[0].style.color = "black";
}
</script>
Class refer multiple component so add [0] index same as you mouseover function call
<h1 class="demo">Mouse over me</h1>
<script>
document.getElementsByClassName("demo")[0].onmouseover = function() {mouseOver()};
document.getElementsByClassName("demo")[0].onmouseout = function() {mouseOut()};
function mouseOver() {
document.getElementsByClassName("demo")[0].style.color = "red";
}
function mouseOut() {
document.getElementsByClassName("demo")[0].style.color = "black";
}
</script>

getElementByID() function is returning null value [duplicate]

This question already has answers here:
Javascript can't find element by id? [duplicate]
(5 answers)
Closed 4 years ago.
The following line of code (in my Javascript file) :-
var header = document.getElementById("theheader");
is resulting in header having a "null" value. Here, "theheader" is the ID of a "h2" type header in my HTML file.
The desired output is:-
<h2 id="theheader" style="color: rgb(114, 58, 76);">
The script tag of the JS file is defined within the head element of the HTML file.
The same line of code would work perfectly in any browser console by giving the desired output i.e.
Even though this issue has been handled before, I could not find the answer as to why the same code above is working in the browser console and not working in IDE's like VSCode, Atom and others?
I would be thankful if anyone could provide me the answer for the above query, specially the one in bold font.
One possible reason could be that your code is running before the DOM is fully loaded. Wrap your code with DOMContentLoaded:
The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
<script>
document.addEventListener("DOMContentLoaded", function(event) {
//Intro
alert("Hey! Welcome to my page!!");
var a = prompt("How are you today?");
alert("Happy to know that you are " + a);
var header = document.getElementById("theheader");
console.log("h2 is " + header);
header.style.color = "red";
function getRandomColor() {
var letters = "0123456789ABCDEF";
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function changeHeaderColor(){
colorInput = getRandomColor()
header.style.color = colorInput;
}
setInterval(changeHeaderColor,500);
});
</script>
<h2 id = "theheader"> Arnab Sinha </h2>

How do I animate title of site in browser tab? [duplicate]

This question already has answers here:
How do I make text inside the title tag animate using JavaScript?
(4 answers)
Closed 5 years ago.
How do I animate site title of site in browser tab like this?
Screen capture GIF:
You can add a scroll animation to the title of your browser tab using this Javascript code:
msg = "Title";
msg = " ...Just a scrolling title example" + msg;position = 0;
function scrolltitle() {
document.title = msg.substring(position, msg.length) + msg.substring(0, position); position++;
if (position > msg.length) position = 0
window.setTimeout("scrolltitle()",170);
}
scrolltitle();
use window.setTimeout() or window.setInterval() and change document.title
This is pure js...
function recursiveAnimateTitle(string) {
let firstLetter = string[0];
let title = document.querySelector('title');
title.innerHTML += firstLetter;
if (string.length > 1) {
setTimeout(function() {
recursiveAnimateTitle(string.substring(1));
}, 100);
}
}
function animateTitle(string) {
document.querySelector('title').innerHTML = "";
recursiveAnimateTitle(string);
}
animateTitle('Example Title');
<head>
<title>Some Default Title</title>
</head>
<body></body>
If you want to vary the time for each letter, use math.random with a range.
With a distribution if you want to get really weird with it.

Javascript: changing img src onclick only works once [duplicate]

This question already has answers here:
IF Statement Always True
(3 answers)
Closed 6 years ago.
This is so simple I'm not sure why I'm having trouble with it. I'm trying to imitate a flip card between two images so when clicked, it would simply change to the other image. I'm having trouble with my if/else statement because every time the image is clicked, it never makes it to the else part. In the source code of the HTML page, the src of the image is being changed but passes the if statement every time.
(function() {
// attaches event handler to image
window.onload = function() {
var image1 = document.getElementById("image1");
image1.onclick = changeImage;
};
// changes image when clicked to flip from image to text and text to image
function changeImage() {
if (document.getElementById("image1").src = "img/top.png") {
document.getElementById("image1").src = "img/toptext.png";
//window.alert('hi');
}
else {
window.alert('it passed');
document.getElementById("image1").src="img/top.png";
}
}
})();
use == or === for comparison in if condition check.
using = will assign the value and always be true since the assigned string is not an empty string.
function changeImage() {
if (document.getElementById("image1").src == "img/top.png") {
document.getElementById("image1").src = "img/toptext.png";
//window.alert('hi');
}
else {
window.alert('it passed');
document.getElementById("image1").src="img/top.png";
}
}
You should use == for an if comparaison
if (document.getElementById("image1").src = "img/top.png") {
change into
if (document.getElementById("image1").src == "img/top.png") {

Using js verification to change background-image

i'm with a little problem. I was building a form in HTML with javascript, but in the inputs, i've used a background-image and a padding in left to make it look better, here its all ok, the problem comes next. I've created this function here:
function verificar_email(email) {
var valor = email.value;
if (valor.length != 0){
if (valor.indexOf('#') >= 1) {
if (valor.indexOf('.') > (valor.indexOf('#') + 1)) {
if (valor.length > (valor.lastIndexOf('.') + 1)) {
email.style.background = "#1abc9c";
email.style.color = "#fefefe";
return true;
}
}
}
}
email.style.background = "#ff0000";
email.style.color = "#fefefe";
return false;
}
When the email input is blank or typed wrong, it's filling my bgimage with bgcolor and making the image dissapear. How can i change my original image to other image i've created without filling with color?
Sorry for my bad english, below i will explain what i'm talking about with some images.
http://imgur.com/a/hkigg - the first image is the error, the second is what it looks like and the final image is what i wanna do.
you can simply set the background color to "transparent" which should stop your background image disappearing

Categories