I have two buttons and I want their contents to be displayed when pressed.
<div>
<h1 id="one">Shapes</h1>
<button id="one1">Square</button>
<button id="one2">Rectangle</button>
</div>
<div id="square">
<h3>Square</h3>
<img src="" alt="" height="" width="" />
Area of a: <input id="area" type="number">
<button onclick="aarea()">Calculate</button>
</div>
<div id="rectangle">
<h3>Rectangle</h3>
<img src="" alt="" height="" width="" />
Area of a: <input id="area" type="number">
Area of b: <input id="areb" type="number">
<button onclick="aarea()">Calculate</button>
</div>
Do I need to make a separate function to calculate the values when displaying the content?
Would something like this work for you? Just using js to toggle a css class which changes rendered display attribute from none to block?
const get = queryStr => document.querySelector(queryStr);
get("#one1").addEventListener("click", () => {
get("#square").classList.toggle("shown");
});
get("#one2").addEventListener("click", () => {
get("#rectangle").classList.toggle("shown");
});
get("#square button").addEventListener("click", () => {
const val = get("#square input").value;
const len = parseFloat(val);
alert("area is: ", len ** 2);
});
get("#rectangle button").addEventListener("click", () => {
const v1 = get("#rectangle #len").value;
const v2 = get("#rectangle #width").value;
const len = parseFloat(v1);
const width = parseFloat(v2);
alert("area is: ", len * width);
});
#square, #rectangle {
display: none;
}
#square.shown, #rectangle.shown {
display: block;
}
<div>
<h1 id="one">Shapes</h1>
<button id="one1">Square</button>
<button id="one2">Rectangle</button>
</div>
<div id="square">
<h3>Square</h3>
<img src="" alt="" height="" width="" />
Square side length: <input id="area" type="number">
<button>Calculate</button>
</div>
<div id="rectangle">
<h3>Rectangle</h3>
<img src="" alt="" height="" width="" />
length: <input id="len" type="number">
width: <input id="width" type="number">
<button>Calculate</button>
</div>
Related
Html:
<section id="secProducts" class="container">
<div id="CART_TEMPLATE" style="display:none">
<figure>
<img src="images/1.jpg" alt="img02" class="img-responsive" height="80" width="80" />
<figcaption>
<p>Product Name:</p>
<p class="productname"></p>
<label for="quant">Enter Quantity:</label>
<input type="number" id="quant" name="quant[]" min="1" >
</figcaption>
</figure>
/* Try to get Value of input from name="quant[]" .But Unable to get document.getElementsByName("quant[0]").value; ? */
</div>
</section>
JavaScript:
function socialSharing()
{
alert("Hi:");
var fun1=document.getElementsByName("quant[0]").value;
alert(fun1);
var fun2=document.getElementsByName("quant[1]").value;
alert(fun2);
alert(bar2);
}
In Html, there is an array of Product Details. It displays all products. But I'm trying to get quantity details with var fun1=document.getElementsByName("quant[0]").value; which returns undefined.
You can access the value of the input elements using the following code:
var fun1 = document.getElementsByName("quant[0]")[0].value;
var fun2 = document.getElementsByName("quant[1]")[0].value;
Here is a small reproduction for the problem: Codepen Demo
The main point as described in other answers, is that getElementsByName() can return multiple elements, compared to getElementById()
// instead of this
var fun1 = document.getElementsByName("quant[0]").value;
// get the first element of the returned result and get this value
var fun1 = document.getElementsByName("quant[0]")[0].value;
function socialSharing()
{
var fun1=document.getElementsByName("quant[0]")[0].value;
document.getElementById("results").innerHTML += "Detected quantity " + fun1 + "<br>";
}
<section id="secProducts" class="container">
<div id="CART_TEMPLATE" >
<figure>
<img src="images/1.jpg" alt="img02" class="img-responsive" height="80" width="80" />
<figcaption>
<p>Product Name:</p>
<p class="productname"></p>
<label for="quant">Enter Quantity:</label>
<input type="number" id="quant" name="quant[0]" min="1" onkeyup="socialSharing()">
</figcaption>
</figure>
</div>
</section>
<div id="results"></div>
In order to show that the code above works, I have added a new div, where each key press handled by the onkeyup event of the input field, will write down the current value of the input field
JavaScript file name selector application, only selecting first element.
There are twelve images with a class of foto, each labelled step1.png, step2.png etc. When one of the images is clicked, the name of the image file should be displayed, less the png file extension. For example, step1.png become step1. It all works as expected but only ever displays the first file name no matter which image is clicked on. I would be very grateful for any clues to my error with this code.
<title>Photo Files</title>
<style>
.box {
margin: auto;
width: 200px;
background-color: lightgray;
}
.box p {
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Selects image file name</h1>
<div class="box">
<img class="foto" src="images/step1.png" alt="" />
<img class="foto" src="images/step2.png" alt="" />
<img class="foto" src="images/step3.png" alt="" />
<img class="foto" src="images/step4.png" alt="" />
<img class="foto" src="images/step5.png" alt="" />
<img class="foto" src="images/step6.png" alt="" />
<img class="foto" src="images/step7.png" alt="" />
<img class="foto" src="images/step8.png" alt="" />
<img class="foto" src="images/step9.png" alt="" />
<img class="foto" src="images/step10.png" alt="" />
<img class="foto" src="images/step11.png" alt="" />
<img class="foto" src="images/step12.png" alt="" />
<p class="picName">Name of file:</p>
<br />
<hr />
</div>
<script>
var pic = document.querySelectorAll(".foto");
for (var i = 0; i < pic.length; i++) {
pic[i].addEventListener(
"click",
function () {
var fullPath = document.querySelector(".foto").src;
var filename = fullPath.replace(/^.*[\\\/]/, "");
document.querySelector(".picName").textContent =
"File name:" + filename.substring(0, filename.lastIndexOf(".")) ||
filename;
},
false
);
}
</script>
</body>
</html>
your issue come from the line
var fullPath = document.querySelector(".foto").src
that return only the first element that match selector .foto
to solve your issue recover image clicked by :
pass an event parameter to your function
recover target clicked with var target = e.target || e.srcElement;
but instead have 12 eventListeners it's better to have only one on parent element of all your clicked image (in your sample .box but you can create a parent one box-pic in my below sample)
var box = document.querySelector(".box-pic");
box.addEventListener('click', function(e) {
var target = e.target || e.srcElement;
if (target.src) {
var filename = target.src.replace(/^.*[\\\/]/, "");
document.querySelector(".picName").textContent = "File name:" + filename.substring(0, filename.lastIndexOf(".")) ||
filename;
}
});
.box {
margin: auto;
width: 200px;
background-color: lightgray;
}
.box p {
color: green;
font-weight: bold;
}
<h1>Selects image file name</h1>
<div class="box">
<div class="box-pic">
<img class="foto" src="images/step1.png" alt="img1" />
<img class="foto" src="images/step2.png" alt="img2" />
<img class="foto" src="images/step3.png" alt="img3" />
<img class="foto" src="images/step4.png" alt="img4" />
<img class="foto" src="images/step5.png" alt="img5" />
<img class="foto" src="images/step6.png" alt="img6" />
<img class="foto" src="images/step7.png" alt="img7" />
<img class="foto" src="images/step8.png" alt="img8" />
<img class="foto" src="images/step9.png" alt="img9" />
<img class="foto" src="images/step10.png" alt="img10" />
<img class="foto" src="images/step11.png" alt="img11" />
<img class="foto" src="images/step12.png" alt="img12" />
</div>
<p class="picName">Name of file:</p>
<br />
<hr />
</div>
Im curently creating a picture gallery for my project in school. I came across the problem that i don't know how to add a picture description that will only show under the big preview picture and not next to the small pictures at the top. Every small picture will have a different description. I tried some stuff myself but i failed miserably, Im still new to all of this :)
Any solutions to that problem?
<head>
<title>Gallery</title>
<link href="galery.css" rel="stylesheet" type="text/css">
</head>
<body background="cosmic.jpg">
<div class="gallery" align="center">
<div class="smallpics">
<img onclick="getElementById('bigpic').src=this.src" id="picture1" src="images/picture1.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture2" src="images/picture2.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture3" src="images/picture3.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture4" src="images/picture4.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture5" src="images/picture5.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture6" src="images/picture6.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture7" src="images/picture7.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture8" src="images/picture8.png" />
<img onclick="getElementById('bigpic').src=this.src" id="picture9" src="images/picture9.png" />
</div>
<div class="bigpic" align="center">
<img id="bigpic" src="images/picture1.png" alt="" />
</div>
<div class="smallpics">
<img onclick="getElementById('bigpic').src=this.src; getElementById('bigpicDesc').innerHTML(this.alt) " id="picture1" src="images/picture1.png" alt="The Description" />
....
</div>
<div class="bigpic" align="center">
<img id="bigpic" src="images/picture1.png" alt="" />
<div id="bigpicDesc"> </div>
</div>
or
<div class="smallpics">
<img onclick="showInBig(this)" id="picture1" src="images/picture1.png" alt="The Description" />
....
</div>
<div class="bigpic" align="center">
<img id="bigpic" src="images/picture1.png" alt="" />
<div id="bigpicDesc"> </div>
</div>
function showInBig(element){
document.getElementById('bigpic').setAttribute('src',element.getAttribute('src'));
document.getElementById('bigpicDesc').innerHTML(element.element.getAttribute('alt'));
}
Given that alt of the small images are the descriptions.
The first thing is to clean up your HTML and separate out the JavaScript. This has a number of benefits. It keeps your HTML and JS separate without muddying one with the other.
All of your onclick code can be handled thus:
var big_pic = document.querySelector('#bigpic');
document.querySelector('body').addEventListener('click', function(evt) {
if (!/^picture\d+$/.test(evt.target.id)) return;
big_pic.src = evt.target.src;
}, false);
Now, let's consider adding a description. The first question is, how are you going to store these, and in relation to the images?
An obvious solution is to store them in a data attribute on the pictures elements. So just as we read the src from the clicked pic's element, we'll read its description from the same source.
So our elements become:
<img id='picture1' src='some/src.jpg' data-descr='Picture description here' />
Then you're going to need a description placeholder in the big picture area, so add a paragraph.
Finally, change the above JS code to factor in the description also:
var
big_pic = document.querySelector('#bigpic'),
big_pic_descr = document.querySelector('.bigpic p');
document.querySelector('body').addEventListener('click', function(evt) {
if (!/^picture\d+$/.test(evt.target.id)) return;
big_pic.src = evt.target.src;
big_pic_descr.innerHTML = evt.target.getAttribute('data-descr');
}, false);
Could be done in 2 ways, first by making use of data- attribute (1)
jsFiddle 1
var pics = document.querySelectorAll('.smallpics img'),
bigPic = document.getElementById('bigpic'),
descP = document.getElementById('description');
for (var i = 0, ln = pics.length; i < ln; i++) {
// we pass each img with its src and data-desc attributes to the function.
var $this = pics[i];
theClickFunction($this, $this.getAttribute('src'), $this.getAttribute('data-desc'));
}
function theClickFunction($th, $src, $desc) {
$th.addEventListener('click', function() {
//on click we update the bigpic display and thedescription paragraph
bigPic.setAttribute('src', $src);
bigPic.style.display = 'block';
descP.innerHTML = $desc;
});
}
body { margin: 0; padding: 0; }
.smallpics img { width: 19%; cursor: pointer; }
#bigpic { display:none}
<div class="gallery" align="center">
<div class="smallpics">
<img id="pic1" src="//dummyimage.com/300x100?text=pic1" data-desc="description of picture 1" />
<img id="pic2" src="//dummyimage.com/300x100?text=pic2" data-desc="description of picture 2" />
<img id="pic3" src="//dummyimage.com/300x100?text=pic3" data-desc="description of picture 3" />
<img id="pic4" src="//dummyimage.com/300x100?text=pic4" data-desc="description of picture 4" />
<img id="pic5" src="//dummyimage.com/300x100?text=pic5" data-desc="description of picture 5" />
<img id="pic6" src="//dummyimage.com/300x100?text=pic6" data-desc="description of picture 6" />
<img id="pic7" src="//dummyimage.com/300x100?text=pic7" data-desc="description of picture 7" />
<img id="pic8" src="//dummyimage.com/300x100?text=pic8" data-desc="description of picture 8" />
<img id="pic9" src="//dummyimage.com/300x100?text=pic9" data-desc="description of picture 9" />
<img id="pic10" src="//dummyimage.com/300x100?text=pic10" data-desc="description of picture 10" />
</div>
<hr>
<div class="bigpic" align="center">
<img id="bigpic" src="images/picture1.png" alt="" />
<p id="description"></p>
</div>
The other way is by using some hidden element, I used <ul> with its lis here but it could be divs or p etc.., while this way adds extra markup to the page it suits better when you have HTML, styled and/or long descriptions rather than just normal text.
jsFiddle 2
var pics = document.querySelectorAll('.smallpics img'),
DescLis = document.querySelectorAll('#hiddenDescs li'),
bigPic = document.getElementById('bigpic'),
descP = document.getElementById('description');
for (var i = 0, ln = pics.length; i < ln; i++) {
// we pass each img with its src attribute.
var $this = pics[i];
theClickFunction($this, $this.getAttribute('src'), i);
}
function theClickFunction($th, $src, i) {
$th.addEventListener('click', function() {
//on click we update the bigpic display and thedescription paragraph
bigPic.setAttribute('src', $src);
bigPic.style.display = 'block';
// get the inner html of the corresponding li and inject it as innerHTML
// of the descreption p
descP.innerHTML = DescLis[i].innerHTML;
});
}
(1) Using alt attribute, as in #Thuin's answer, rather than data-* is better because: This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded.
This is the real situation:
As I said I have 12 different DIV's and a page like this.I have linked the js file already
index.html:
<div id="images_puzzle">
<div>
<img />
<p></p>
</div>
<div>
<img />
<p></p>
</div>
<div>
<img />
<p></p>
</div>
<div>
<img />
<p></p>
</div>
<div>
<img />
<p></p>
</div>
<div>
<img />
<p></p>
</div>
<div>
<img />
<p></p>
</div>
<div>
<img />
<p></p>
</div>
<div>
<img />
<p></p>
</div>
<div>
<img />
<p></p>
</div>
<div>
<img />
<p></p>
</div>
<div>
<img />
<p></p>
</div>
</div>
</div>
Notive the I have combined Jquery.js with my own js file.
this is where I can't get what I want. By hovering the mouse over each image I want to call a function, all other attributes are working well but this one is not.
webroot.js:
function setPuzzleImages() {
// alert('loading images...');
var $index = 1;
var $IMGs = $('#images_puzzle IMG');
$IMGs.each(function () {
$(this).attr({ 'src': 'images/105-100/' + $index + '.jpg','onmouseover':'showTitle('+$index+');'});
$index++;
});
}
function showTitle($index) {
alert('this is the'+$index+'image');
}
The only problem I could see is that the method showTitle may not be in the global scope so try
$myImg = $('img')
$myImg.attr({
src: 'myPic.png'
}).mouseover(showTitle);
function showTitle() {
alert('Hello World');
}
Demo: Fiddle
Your ode works fine if you add the method to global scope
Demo: Fiddle
Based on the update
function setPuzzleImages() {
var $IMGs = $('#images_puzzle IMG');
$IMGs.mouseover(showTitle).attr('src', function (i) {
return 'images/105-100/' + (i + 1) + '.jpg'
})
}
function showTitle() {
console.log('Hello World', this);
}
I have three divs, each containing multiple images.
There are also three buttons on the page.
I would like to create an effect where clicking on each button fades in the corresponding div and fades out the other two divs.
I have tried to follow code posted previously for similar effects, but have been unsuccessful and am hoping for some help from those who have more skill than I do! Thanks, Ross
The HTML is as follows;
<div id="GROUP-Join">
<img class="CentreBox" src="images/CentreBox.png"
width="487" height="173">
<img id="TitleOne" src="images/TitleOne.png"
width="339" height="19">
<img id="TitleTwo" src="images/TitleTwo.png"
width="143" height="14">
<body onLoad="focus();signup.email.focus()"></body>
<form method="post" name="signup" action="signup.php">
<input id="EmailAddress" type="text" name="email"
placeholder="e-mail" style="color: #000000;
font-family: 'Arial'; font-size: 20px; background-color:transparent;
border:hidden;" size="24" maxlength="49">
<input id="Go" type="image" name="submit" src="images/Go.png"
alt="submit" value="GO">
</form>
</div>
<div id="GROUP-About">
<img class="CentreBox" src="images/CentreBOX.png"
width="487" height="173">
<img id="AboutHead" src="images/AboutHead.png"
width="132" height="19">
<img id="JumpAround" src="images/JumpAround.png"
width="379" height="33">
<img id="Win" src="images/Win.png"
width="254" height="15">
</div>
<div id="GROUP-Contact">
<img class="CentreBox" src="images/CentreBOX.png"
width="487" height="173">
<img id="ContactHeading" src="images/ContactHead.png"
width="124" height="19">
<img id="Email" src="images/e-mail.png"
width="24" height="17">
<img id="Twitter" src="images/tw.png"
width="24" height="20">
<img id="fb" src="images/fb.png"
width="10" height="21">
</div>
<button id="button1">Join</button>
<button id="button2">About</button>
<button id="button3">Contact</button>
I'm not sure this is what you're meaning, but this will fade in each corresponding div and fade out the other two.
<script type="text/javascript">
$(document).ready(function () {
$('#btn1').click(function () {
$('#div1').fadeIn();
$('#div2').fadeOut();
$('#div3').fadeOut();
});
$('#btn2').click(function () {
$('#div1').fadeOut();
$('#div2').fadeIn();
$('#div3').fadeOut();
});
$('#btn3').click(function () {
$('#div1').fadeOut();
$('#div2').fadeOut();
$('#div3').fadeIn();
});
});
</script>
And the markup:
<div>
<div id="div1">
hello
</div>
<div id="div2">
hello 2
</div>
<div id="div3">
hello 3
</div>
<div>
<input type="button" id="btn1" />
<input type="button" id="btn2" />
<input type="button" id="btn3" />
</div>
</div>
The jquery fadeIn and fadeOut functions also have callbacks, so you could also do:
$('#div2').fadeOut(100,
function() { $('#div3').fadeOut(100,
function() { $('#div1').fadeIn(100);
});
});
Check this FIDDLE
This script should get the work done for you
$(function(){
$('button').on('click', function() {
var btnText = $(this).text();
$('div').fadeOut('slow');
$('#GROUP-'+btnText).fadeIn('slow');
});
});
When you run an effect in jQuery such as fadeIn, you can provide a callback so that you can perform actions once that effect has completed. For instance, in your case:
$('#button1').click(function() {
$('#GROUP-Contact').fadeOut(500);
$('#GROUP-About').fadeOut(500, function() {
$('#GROUP-Join').fadeIn(500);
});
});
This is my best guess of what you are looking for without seeing any JS code.