I have five jpg pictures and on a homepage i want to choose between these five pics by typing 1,2,3,4 or 5 and click OK and then i want that picture to show.
My code looks like this:
var inputElem, msgElem;
function init() {
msgElem = document.getElementById("message");
inputElem = [];
inputElem[1] = document.getElementById("input1");
inputElem[2] = document.getElementById("input2");
inputElem[3] = document.getElementById("input3");
document.getElementById("btn1").onclick = showFruit;
}
window.onload = init;
function showFruit() {
var nr, fruitUrl;
fruitUrl = (fruitImg.src = "pics/fruit" + nr + ".jpg");
nr = Number(input1.value);
fruitImg.src = "pics/fruit" + nr + ".jpg";
fruitUrl = document.getElementById("fruitImg").src = "pics/fruit1.jpg";
The problem is that I can't change the picture.I don't know whats missing, or how to make it choose between pic 1-5.
I have no privilege to write comments, so can't estimate what you actually want. But the resulting effect may be the thing you want.
But have look up below examples (live here). Enter a number then click button.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="image">
<img src="salon1.jpg" id="fruit">
</div>
<input type="number" id="inp">
<input type="submit" id="btn1" onclick="showFruit('inp')">
<script type="text/javascript">
makeImageFromNum = function (n) {
var nr = document.getElementById(n).value;
if (parseInt(nr)>5) {
nr = 5;
}
else if (parseInt(nr)<1) {
nr = 1;
}
return "salon"+nr+".jpg";
}
showFruit = function (n) {
document.getElementById("fruit").src = makeImageFromNum(n);
}
</script>
</body>
</html>
In below example (live here) just change the number - no need to click a button, there is no any actually :)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="image">
<img src="salon1.jpg" id="fruit">
</div>
<input type="number" id="inp" onchange="showFruit(this.value)">
<script type="text/javascript">
makeImageFromNum = function (nr) {
if (parseInt(nr)>5) {
nr = 5;
}
else if (parseInt(nr)<1) {
nr = 1;
}
return "salon"+nr+".jpg";
}
showFruit = function (n) {
document.getElementById("fruit").src = makeImageFromNum(n);
}
</script>
</body>
</html>
Note that you're always assinging the first image in this line of code (the last Iine if your code)
fruitUrl = document.getElementById("fruitImg").src = "pics/fruit1.jpg";
So, you'll always see image one
Related
<!DOCTYPE html>
<html>
<head>
<script>
var trafficlights = ['redlight.png','yellowlight.png','greenlight.png'];
var num = 1
function lightsequence() {
document.getElementById('light').src = trafficlights[num];
num = num + 1;
}
</script>
</head>
<body>
<img id="light" src="redlight.png">
<button onclick="lightsequence()">Change Lights</button>
</body>
</html>
I have written that piece of code and the images change in order one by one each time I click the button but I cannot think of how to reverse the order if I keep clicking, i.e. traffic lights red yellow green yellow red etc. each time I click. I am unfamiliar with jQuery so would like to not use them ideally but if someone can explain it fully with jQuery in working it will have to do.
Modulo operator is very convenient in such cases:
document.getElementById('light').src = trafficlights[num++ % trafficlights.length];
Here is a demo:
var trafficlights = [
'https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Red.png',
'https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Yellow.png',
'https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Green.png'
];
var num = 1
function lightsequence() {
document.getElementById('light').src = trafficlights[num++ % trafficlights.length];
}
<img id="light" src="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Red.png">
<button onclick="lightsequence()">Change Lights</button>
Change Lights
function lightsequence(){
document.getElementById("light").src
if(document.getElementById("light").src=="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Red.png"){
document.getElementById("light").src="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Yellow.png"
}else if(document.getElementById("light").src=="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Yellow.png"){
document.getElementById("light").src="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Green.png"
}else{
document.getElementById("light").src="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Red.png"
}
}
<img id="light" src="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Red.png">
<button onclick="lightsequence()">Change Lights</button>
Please note that I am not using classes. I haven't found an answer for this SPECIFIC question.
Using javascript, how can I program a button to change the stylesheet each time the button is clicked?
I've tried different if, else if and else, but when I try them, it breaks the code (ie, it will change the color to blue if red, but not back again).
It works with 2 buttons, but getting it to change each time a single button is clicked seems to be eluding me. I got feed up and programmed a second button to change it back.
This works for 2 buttons:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>"Your Title Here"</title>
<link id="um" rel="stylesheet" href="stylesheet1.css">
<style>
</style>
</head>
<body>
<p>booga</p>
<button id="x" onclick="myFunction()">blue</button>
<button id="x1" onclick="myFunction1()">red</button>
<script>
function myFunction() {
if (document.getElementById("um").href = "stylesheet1.css"){
document.getElementById("um").href = "stylesheet2.css"}
}
function myFunction1() {
if (document.getElementById("um").href = "stylesheet2.css"){
document.getElementById("um").href = "stylesheet1.css"}
}
</script>
</body>
I would like to be able to get rid of the second button and second function and have it all with one button.
EDIT...
I tried this, and it failed.
function myFunction() {
if (document.getElementById("um").href == "stylesheet1.css")
{document.getElementById("um").href = "stylesheet2.css"};
else {document.getElementById("um").href = "stylesheet1.css"}
}
Make sure you're using == instead of = for your comparisons!
if (document.getElementById("um").href == "stylesheet1.css")
etc
Try this:
<button id="x" onclick="myFunction()">Change</button>
<script>
function myFunction() {
var link = document.getElementById("um");
var segments = link.href.split('/');
var currentStyle = segments[segments.length - 1];
var style = (currentStyle == 'stylesheet1.css') ? 'stylesheet2'
: 'stylesheet1';
document.getElementById("um").href = style + ".css"
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>"Your Title Here"</title>
<link id="um" rel="stylesheet" href="stylesheet1.css">
</head>
<body>
<p>booga</p>
<button onclick="myFunction('um','stylesheet1.css', 'stylesheet2.css')">swap</button>
<script>
function myFunction(id,a,b) {
var el = document.getElementById(id);
var hrefStr;
if(~el.href.indexOf(a)) {
hrefStr = el.href.replace(a, b);
el.href = hrefStr;
} else {
hrefStr = el.href.replace(b, a);
el.href = hrefStr;
}
}
</script>
</body>
</html>
When ever I try to click on the image, the image changes but the next image in the array is not displayed
<!doctype html>
<html>
<head>
<title>
slides
</title>
<script type="text/javascript">
function nextslide(){
var images = new Array()
images[0]= "home.jpg"
images[1]= "left.jpg"
images[2]= "right.jpg"
var currentpic=0
var lastpic= images.lenth-1;
if (currentpic =lastpic)
{
currentpic=0;
document.getElementById('slide').src = images[currentpic];
}else
{
currentpic++;
document.getElementById('slide').src = images[currentpic];
}
}
</script>
</head>
<body>
<img src="home.jpg" id="slide" onclick="nextslide()">
</body>
</html>
Help would be greatly appreciated.
Thank you for the help.
There are several things wrong with your code. Here is the fixed version:
<!doctype html>
<html>
<head>
<title>slides</title>
<script type="text/javascript">
var images = new Array();
images[0] = "home.jpg";
images[1] = "left.jpg";
images[2] = "right.jpg";
var currentpic = 0;
var lastpic = images.length-1;
function nextslide()
{
if (currentpic == lastpic)
{
currentpic = 0;
document.getElementById('slide').src = images[currentpic];
}
else
{
currentpic++;
document.getElementById('slide').src = images[currentpic];
}
}
</script>
</head>
<body>
<img src="home.jpg" id="slide" onclick="nextslide()">
</body>
</html>
What's wrong?
var lastpic= images.lenth-1; You're missing a g in length.
if (currentpic =lastpic) To check if var1 is the same as var2, you need to use == instead of =
You're missing a couple of semicolons.
You should declare currentpic, images, and lastpic outside of your function to make it actually set the image as the next image.
To try and debug yourself
Always check your browser's developer console for errors.
try this
1.) Specify globallythis variable
var currentpic=0;
2.) Change in images.lenth to images.length
3.) Change if (currentpic =lastpic) to if (currentpic ==lastpic)
<!doctype html>
<html>
<head>
<title>
slides
</title>
<script type="text/javascript">
var currentpic=0;
function nextslide(){
var images = new Array()
images[0]= "http://thewowstyle.com/wp-content/uploads/2015/04/Cartoon.jpg"
images[1]= "http://vignette2.wikia.nocookie.net/epicrapbattlesofhistory/images/1/10/Penguin-cartoon.png/revision/latest?cb=20141207223335"
images[2]= "http://cliparts.co/cliparts/kiK/Byz/kiKByzxoT.jpg"
var lastpic= images.length-1;
if (currentpic ==lastpic)
{
currentpic=0;
document.getElementById('slide').src = images[currentpic];
}else
{
currentpic++;
document.getElementById('slide').src = images[currentpic];
}
}
</script>
</head>
<body>
<img src="home.jpg" id="slide" onclick="nextslide()">
</body>
</html>
I am building a simple game as practice that counts the number of taps pressed in 3 seconds i have done everything apart from making it able to save the record score and if there is no record score then to show the old record.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="javascript1.js"></script>
<link type="text/css" rel="stylesheet" href="firstcss.css">
</head>
</head>
<body>
<div id="div1">
<button onclick="myFunction()" id="something">GO
</button>
</div>
<div id="div2">
<p id="paragraph">0</p>
</div>
<p id="don"></p>
<p id="record"></p>
<p id="add"></p>
<script>
var cool = 1;
var red = 0;
function myFunction() {
document.getElementById("something").innerHTML = "Keep Tapping";
document.getElementById("paragraph").innerHTML = cool;
cool++;
var parent = document.getElementById("div1");
setTimeout(function() {
var ooo = cool - 1;
document.getElementById("don").innerHTML = ooo;
var parent = document.getElementById("div1");
var child = document.getElementById("something");
parent.removeChild(child);
var parent1 = document.getElementById("div2");
var child1 = document.getElementById("paragraph");
parent1.removeChild(child1);
if (cool - 1 > red) {
var red = cool - 1;
document.getElementById("record").innerHTML = red;
} else {
document.getElementById("record").innerHTML = red;
document.getElementById("add").innerHTML = red;
}
}, 3000);
}
</script>
</body>
</html>
I am using the if statement at the end but want to know how you would save the high score or if there isnt one to say the old high score. thanks it would be really helpful.
Check out the following resources on local storage:
http://diveintohtml5.info/storage.html
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
Essentially you can do (taken from the Dive int HTML 5 link):
var foo = localStorage.getItem("bar");
// ...
localStorage.setItem("bar", foo);
Why doesn't this code work? I want it to change the color of the input background whether the value is correct (green) or not (red).
<html>
<head>
<script type="text/javascript">
function funct1 () {
var username = "63XZ4";
if(username == document.getElementById('keygen').value ) {
document.getElementById('keygen').style.backgroundColor = '#5bc556';
}
else {
colorchange.style.backgroundColor = 'red';
}
}
return 0;
</script>
</head>
<body>
<input type="text" id="keygen">
<button onclick="funct1"></button>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function funct1 () {
var username = "63XZ4";
var keygen = document.getElementById('keygen');
if(username == keygen.value) {
keygen.style.backgroundColor = '#5bc556';
} else {
keygen.style.backgroundColor = 'red';
}
}
</script>
</head>
<body>
<input type="text" id="keygen" />
<button onclick="funct1()">Button Title</button>
</body>
</html>
The above should help. Also, you may want to look into this:
Give more descriptive names to functions you declare.
Save time by eliminating calls to "getElementById" by storing DOM elements in variables.