Adding array result to a string - javascript

This is a little script randomizing what picture should it display. I can easily set this to an <img> using document.getElementById("pic").src = randPics[randNumGen], but the background tag requires me to use url(). How can I set document.body.style.background to "url(and the random image here)"? Please no JS libraries.
const randPics = ["https://i.ibb.co/6JBbMYm/pic1.jpg", "https://i.ibb.co/rHjTdfc/pic2.jpg"];
window.onload = choosePicture();
function choosePicture() {
let randNumGen = Math.floor(Math.random() * randPics.length);
console.log(randNumGen);
document.body.style.background = "randPics[randNumGen]";
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script async src="index.js" type="text/javascript"></script>
</head>
<body>
<img width="500px" src="#" alt="pic" id="pic">
</body>
</html>

var url = randPics[randNumGen];
document.body.style.backgroundImage = "url('"+ url + "')";

Related

getElementById does not call the HTML ID

I have a folder with two files each, once the HTML file, and once the JS file to make everything clearer. My problem now is that I try to access an ID within the HTML file with the getElementById but this doesn't seem to work.
var score = 0;
score = score + 1;
document.getElementById("score").outerHTML = score;
<!DOCTYPE html>
<head>
<title>Clicker Game</title>
<link rel="stylesheet" href="design.css">
<script src="code.js" type="text/javascript"></script>
</head>
<body>
<p>Cookies: <span id="score">0</span></p>
<img src="images/cookie.png" height="256px" width="256px">
</body>
</html>
I am trying to call the ID "score" in the HTML file to make sure that when I start the HTML file locally the number changes from 0 to 1.
Click on the number in the HTML file, which will change the value. You cannot change the value without a trigger in the HTML. Something needs to be clicked or changed for the value to appear.
Edit: And don't grab the outerHTML of the element. You are erasing the whole score span and replacing it with the count. Use textContent instead.
let elem = document.querySelector("#score");
elem.addEventListener("click", (e) => {
elem.textContent = Number(elem.textContent) + 1;
})
#score {
cursor: pointer;
}
<!DOCTYPE html>
<head>
<title>Clicker Game</title>
<link rel="stylesheet" href="design.css">
<script src="code.js" type="text/javascript" defer></script>
</head>
<body>
<p>Cookies: <span id="score">0</span></p>
<img src="images/cookie.png" height="256px" width="256px">
</body>
</html>

How do I output a variable from Javascript to html?

I want to inject text into a div using a variable. Here's a Stack Snippet of my code:
tDNA() {
var dna = prompt("Enter the DNA: ");
}
document.getElementById("dna").innerHTML = "DNA: " + dna;
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<src="main.js">
<div id="dna"></div>
</body>
</html>
function promp
You need to import your script like this
<script type="text/javascript" src="main.js"></script>
You can try this out.
HTML
<html>
<head>
</head>
<body>
<script defer src = "main.js"></script>
<div id = "dna">
<p></p>
</div>
</body>
</html>
JavaScript
function promptDNA(){
var dna = prompt("Enter the DNA: ");
d1 = document.querySelector("p");
d1.textContent = dna;
}
promptDNA();
Like this, you have to add the data to the HTML where the variable dna is in scope and then actually call the function
function promptDNA(){
var dna = prompt("Enter the DNA: ");
document.getElementById("dna").textContent = "DNA: " + dna;
}
promptDNA()
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="dna"></div>
<script src="main.js"></script>
</body>
</html>
Also, you're importing your script improperly.

How can you access external JavaScript arrays in an html file?

I'm creating a website for a school project with different arrays of facts. I created multiple files with different JavaScript facts arrays and am trying to call them in the index.html file but I'm not sure how to call them without an a href tag. I've researched and most people say to try sourcing in the tag but nothing is printing.
This is my index.html code:
<!doctype html>
<html>
<head>
<meta charset="utf8" />
<title></title>
<link rel="stylesheet" type="text/css" href="main.css" />
<script src="EllaFactsArray.html" type="text/javascript"></script>
</head>
<body>
<p>
Here is a fact about Ella:
</p>
<script>
getEllaFact();
</script>
</body>
</html>
This is my facts array (EllaFactsArray.html):
<html>
<title>Ella Facts</title>
<head>
<script type="text/javascript">
function getEllaFact()
{
Ella = new Array(6);
Ella[0] = "Ella had a six decade long career.";
Ella[1] = "";
Ella[2] = "";
Ella[3] = "";
Ella[4] = "";
Ella[5] = "";
i = Math.floor(Math.random() * Ella.length);
document.write("<dt>" + Ella[i] + "\n");
}
</script>
</head>
<body>
<script type="text/javascript">
getEllaFact();
</script>
</body>
</html>
The script needs to reference a JavaScript file, not an HTML file containing a function. Move the function into its own file and include it in the pages as needed.
<script src="EllaFactsArray.js" type="text/javascript"></script>
https://www.w3schools.com/js/DEFAULT.asp

change image on timer,

I know this question is asked frequently but I can not copy a code. I want the image to change after a time. I think I made a lot of wrong coding errors. Below is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="/css/styles.css">
</head>
<body>
<img id="image" src="foto1.jpg">
<script type = "text/javascript">
var image=document.getElementById("image");
function volgendefoto() {
if (images==0) {
image.src="foto2";
}
if (images==1) {
image.src="foto2";
}
if (images==3) {
image.src="foto1";
}
}
function timer(){
setInterval(volgendefoto, 3000);
}
var images= [], x = -1;
image[0]="foto1.jpg";
image[1]="foto2.jpg";
image[2]="foto3.jpg";
</script>
</body>
</html>
Thanks in advance for help,
Jasper
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="/css/styles.css">
</head>
<body>
<img id="image" src="foto1.jpg">
<script type = "text/javascript">
var image = document.getElementById("image");
var currentPos = 0;
var images = ["foto1.jpg", "foto2.jpg", "foto3.jpg"]
function volgendefoto() {
if (++currentPos >= images.length)
currentPos = 0;
image.src = images[currentPos];
}
setInterval(volgendefoto, 3000);
</script>
</body>
</html>
You're not creating your interval, timer is never executed. Here's one that will loop your pictures, assuming that your first image is images is the one preloaded (eg: images[0] === image.src on page load) :
const image=document.getElementById("image");
let images= ["foto1.jpg","foto2.jpg","foto3.jpg"], i = 0;
function volgendefoto() {
i<images.length?i+=1:i=0;
image.src=images[i];
}
setInterval(volgendefoto, 3000);

"Uncaught TypeError" when executing a Javascript function from a <script> HTML tag

I'm working on a basic quiz Javascript game, but when I use
document.getElementById("demo").innerHTML = "text";
I get this error message:
Uncaught TypeError: Cannot set property 'innerHTML' of null
in the Chrome Console. I have no idea why this no longer works, it has worked for me in the past. However, if I open up a new
tag, the function runs and the code works. It's only when I run the function in the same
tag.
My code is below:
<!DOCTYPE html>
<html>
<head>
<title>Study Quiz</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script>
function quiz() {
var rnd = Math.floor(Math.random() * 4);
document.getElementById("demo").innerHTML = rnd;
}
quiz(); //this one does not work
</script>
</head>
<body>
<p id="qarea"><p>
<p id="demo"></p>
<script>
quiz(); //this one does work
</script>
</body>
</html>
You forgot to include id in front of your ="demo" it should look like <p id="demo"> instead of
<p="demo"></p>
Second the reason the first call to quiz does not work is that your document has not loaded yet. you want to do this on pure js
<body onload="myFunction()">
Like this should work: http://jsfiddle.net/t8jnhmhg/1/ <p="demo" is wrong
It should be the following.
Where you would have to add the id attribute to the p tag.
<!DOCTYPE html>
<html>
<head>
<title>Study Quiz</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script>
function quiz() {
var rnd = Math.floor(Math.random() * 4);
document.getElementById("demo").innerHTML = rnd;
}
quiz(); // Will not work here because there is no such
// element with ID "demo" at this point in the page load.
</script>
</head>
<body>
<p id = "qarea"><p>
<p id = "demo"></p>
<script>
document.addEventListener( "DOMContentLoaded", function(){
quiz(); // Will work here because the DOM is loaded at this point.
});
</script>
</body>
</html>

Categories