I'm trying to display play or pause button when a user clicks on it. I know I can actually compare those links but I think using a variable would be easier to see?
Thanks.
`
<!DOCTYPE html>
<html>
<head>
<title>ch6</title>
</head>
<body>
<h1>List</h1>
<h2>audio note</h2>
<p>Enter note name</p>
<input type="text" >
<br>
<img id="pic" onclick="click()" src="http://www.clker.com/cliparts/d/b/c/f/13652249372108434179Record%20Button%20Microphone.svg.hi.png" alt="record" style="width:50px;height:60px;">
<script type="text/javascript">
function click(){
var butt = true;
if(butt === true)
{
document.getElementById("pic").src = "https://www.shareicon.net/download/2017/02/07/878546_media_512x512.png";
butt = false;
}
else
{
document.getElementById("pic").src = "http://www.clker.com/cliparts/d/b/c/f/13652249372108434179Record%20Button%20Microphone.svg.hi.png";
butt = true;
}
}
</script>
</body>
</html>
`
I hope to click to change the image.
The image doesn't change when I click it.
Seems like HTML/JS doesn't allow a function named click to be set to onclick. Please change
function click(){
to
function clickk(){
and
<img id="pic" onclick="click()"
to
<img id="pic" onclick="clickk()"
Also, move your var butt = true; outside the function.
Full example below:
<!DOCTYPE html>
<html>
<head>
<title>ch6</title>
</head>
<body>
<h1>List</h1>
<h2>audio note</h2>
<p>Enter note name</p>
<input type="text">
<br>
<img id="pic" onclick="clickk()" src="http://www.clker.com/cliparts/d/b/c/f/13652249372108434179Record%20Button%20Microphone.svg.hi.png" alt="record" style="width:50px;height:60px;">
<script type="text/javascript">
var butt = true;
function clickk() {
if (butt === true) {
document.getElementById("pic").src = "https://www.shareicon.net/download/2017/02/07/878546_media_512x512.png";
butt = false;
} else {
document.getElementById("pic").src = "http://www.clker.com/cliparts/d/b/c/f/13652249372108434179Record%20Button%20Microphone.svg.hi.png";
butt = true;
}
}
</script>
</body>
</html>
You need to take the variable initialization outside of the function itself
<script type="text/javascript">
var butt = true;
function click(){
if(butt === true)
{
document.getElementById("pic").src = "https://www.shareicon.net/download/2017/02/07/878546_media_512x512.png";
butt = false;
}
else
{
document.getElementById("pic").src = "http://www.clker.com/cliparts/d/b/c/f/13652249372108434179Record%20Button%20Microphone.svg.hi.png";
butt = true;
}
}
</script>
Try use this code:
<img id="pic" src="http://www.clker.com/cliparts/d/b/c/f/13652249372108434179Record%20Button%20Microphone.svg.hi.png" alt="record" style="width:50px;height:60px;">
<script type="text/javascript">
var butt = true;
var img = document.getElementById('pic');
img.addEventListener('click', click);
function click(e){
if(butt === true)
{
e.target.src = "https://www.shareicon.net/download/2017/02/07/878546_media_512x512.png";
butt = false;
}
else
{
e.target.src = "http://www.clker.com/cliparts/d/b/c/f/13652249372108434179Record%20Button%20Microphone.svg.hi.png";
butt = true;
}
}
Declare the variable outside the click function::
var butt = true;
function click(){
}
now work same in that function
Related
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
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>
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.
I have the following code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function addChildElements()
{
var newdiv=document.createElement("li");
var newtext=document.createTextNode("test");
newdiv.appendChild(newtext);
document.getElementById("scribble").appendChild(newdiv);
}
</script>
<script>
function storeUserScribble(id) {
var scribble = document.getElementById('scribble').children;
localStorage.setItem('userScribble',scribble);
}
function getUserScribble() {
if ( localStorage.getItem('userScribble')) {
var scribble = localStorage.getItem('userScribble');
}
else {
var newdiv=document.createElement("li");
var newtext=document.createTextNode("test");
newdiv.appendChild(newtext);
document.getElementById("scribble").appendChild(newdiv);
}
document.getElementById('scribble').children = scribble;
}
function clearLocal() {
clear: localStorage.clear();
return false;
}
</script>
</head>
<body>
<ol id="scribble" contenteditable="false" onclick="storeUserScribble(this.id);">
</ol>
<input type="button" value="Add Child Element" onclick="addChildElements(); storeUserScribble(document.getElementById('scribble').id);"/>
</body>
</html>
Which is meant to save the list items as they are created, but i'm completely at a loss. This code doesn't work. I know it probably has something to do with:
var scribble = document.getElementById('scribble').children;
or
onclick="addChildElements(); storeUserScribble(document.getElementById('scribble').id);"
But that is about where my JS knowledge stops.
Any help is much appreciated.
I wish to change the font-family of a paragraph continuously after every 1 second.. Here is my non-working code...
<!DOCTYPE html>
<html>
<head>
<script src = "jquery.js"> </script>
<script>
$(document).ready(function() {
var idee = document.getElementById('p1');
changeFont();
});
function changeFont()
{
if(idee.style.fontFamily == 'times')
{
idee.style.fontFamily = 'courier';
}
else if(idee.style.fontFamily == 'courier')
{
idee.style.fontFamily = 'times';
}
setTimeout(changeFont, 1000);
}
</script>
</head>
<body>
<p id="p1">This is some text.</p>
</body>
</html>
So.. what am I doing wrong? How to change font conditionally?
This code works fine..
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
function changeFont()
{
var idee = document.getElementById("p1").style.fontFamily;
if( idee == 'times')
{
document.getElementById("p1").style.fontFamily = 'courier';
}
else if(idee == 'courier')
{
document.getElementById("p1").style.fontFamily = 'times';
}
var int=setTimeout(function(){changeFont();},1000);
}
</script>
</head>
<body onload=" changeFont();">
<p id="p1" style="font-family: times;">This is some text.</p>
</body>
</html>
you have set var idee in the anonymous function inside the document ready but you're not passing it to changeFont, you're just calling changeFont and hoping that it's there on the global namespace.
try this first:
<!DOCTYPE html>
<html>
<head>
<script src = "jquery.js"> </script>
<script>
$(document).ready(function() {
var idee = document.getElementById('p1');
changeFont(idee);
});
function changeFont(idee)
{
if(idee.style.fontFamily == 'times')
{
idee.style.fontFamily = 'courier';
}
else if(idee.style.fontFamily == 'courier')
{
idee.style.fontFamily = 'times';
}
setTimeout(function() {changeFont(idee)}, 1000);
}
</script>
</head>
<body>
<p id="p1">This is some text.</p>
</body>
</html>
idee is being declared inside the anonymous function.
It will not be visible in changeFont.
<script>
var idee;
$(document).ready(function() {
idee = document.getElementById('p1');
changeFont();
});
AND
setTimeout('changeFont()',1000);