I printed to the screen 16 icons (little pictures).
Now I want to be able to select icons,
and when I press a button the selected icons ids will be sent in a form.
I saw in the net only checkboxes and lists multiselect,
what's the best way to do this?
(I'm pretty new to web design)
thanks ahead!
Although jQuery isn't in your tags, you should introduce yourself to jQuery. It'll make your life easier, for what you're trying to do. Here is the basic steps both if you use jQuery and if use just Javascript:
With jQuery
Give all your icons a class and each one a unique id:
<img src='icon1.png' data-iconID=2233 class='myIcons' />).
Then bind that class to a click event
$('.myIcons').bind('click', function() {
$(this).toggleClass('selectIcon');
});
Attach form submit function to onsubmit:
<form ... onsubmit="submitForm();">
Build submitForm function:
function submitForm() {
var csvIconIds = '';
$.each($('.myIcons.selectIcon'), function (index, value) {
csvIconIds += $(value).attr('data-iconID');
});
//submit scvIconIds here along with other form data (ajax?)
}
With Javascript
Similar as above but way more complicated...
To toggle classes see this thread: How to add/remove a class in JavaScript?
To getting attributes by class see this site: http://www.actiononline.biz/web/code/how-to-getelementsbyclass-in-javascript-the-code/
This could be a way using just plain Javascript or jQuery. I prefer the jQuery version, since it separates the click handler from the markup, instead of using inline onclick handlers, which are in general discouraged.
What this does is use an input element array, which you can create by adding [] to the element name. This same technique can be used on SELECTs and other elements, since it signals to the server that an array has been submitted, as opposed to value known by a single key.
<html>
<head>
<style type="text/css">
div img {
cursor: pointer;
border: 1px solid #f00;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script>
function setFormImage(id) {
if (id != '' && !document.getElementById('input_'+id)) {
var img = document.createElement('input');
img.type = 'text';
img.id = 'input_'+id;
img.name = 'images[]';
img.value = id;
document.imageSubmit.appendChild(img);
}
}
$(document).ready(function(){
$('#jqueryimages img').click(function(){
setFormImage(this.id);
});
});
</script>
</head>
<body>
<pre><?php
if (count($_GET['images'])) {
print_r($_GET['images']);
}
?></pre>
<div style="float: left; width: 49%;">
<h1>Plain ol' HTML</h1>
1. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-1" onclick="setFormImage(this.id)"/>
<br/>
2. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-2" onclick="setFormImage(this.id)"/>
<br/>
3. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-3" onclick="setFormImage(this.id)"/>
<br/>
4. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-4" onclick="setFormImage(this.id)"/>
</div>
<div id="jqueryimages" style="float: left; width: 49%;">
<h1>jQuery</h1>
5. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-5"/>
<br/>
6. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-6"/>
<br/>
7. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-7"/>
<br/>
8. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-8"/>
</div>
<h1>Form Submit</h1>
<form name="imageSubmit" method="get">
<input type="submit" value="View Selected"/>
</form>
</body>
</html>
try this
var idArray = [];
$("#container-id img").each(function(index,value){
idArray.push($(value).attr("id"));
});
//do anything with the array
Related
I am new to JavaScript. I created this code in order to try and make buttons that will hide
and show certain pictures on the page. I have 3 buttons, the first of which is supposed to run my JavaScript code in <script></script> tags, the other two just have Javascript code inside them and they work fine. But they don't hide the picture once they are clicked a second time, which is why I am trying to do that for the first one if possible.
For some reason, I cannot get the first button with "open()" to work the way I want with my Javascript code. Can anyone with more experience please explain to me what I am doing wrong? Thank you in advance...
var btn1 = document.getElementById('1');
var btn2 = document.getElementById('2');
var btn3 = document.getElementById('3');
var display1 = btn1.getAttribute('display')
var display2 = btn2.getAttribute('display')
var display3 = btn3.getAttribute('display')
function open() {
if (display1 === ('none')) {
btn1.setAttribute('display', 'block');
} else {
btn1.setAttribute('display', 'none');
}
}
<img id="1" src="forge.PNG" style="height:320px; display:none; padding:10px">
<img id="2" src="lizard.jpg" style="height:320px; display:none; padding:10px">
<img id="3" src="walkway.jpg" style="height:320px; display:none; padding:10px">
<button onclick="open()">1</button>
<button onclick="document.getElementById('2').style.display='block'">2</button>
<button onclick="document.getElementById('3').style.display='block'">3</button>
I'd use event delegation to watch for clicks on the container. When the nth button is clicked, select the nth image, and toggle a class that hides/shows the image:
const images = document.querySelectorAll('img');
const buttons = [...document.querySelectorAll('button')];
document.addEventListener('click', (e) => {
if (e.target.matches('button')) {
const i = buttons.indexOf(e.target);
images[i].classList.toggle('hidden');
}
});
.hidden {
display: none;
}
<img id="1" src="https://www.gravatar.com/avatar/34932d3e923ffad9a4a1423e30b1d9fc?s=48&d=identicon&r=PG&f=1" style="height:320px; padding:10px" class="hidden">
<img id="2" src="https://www.gravatar.com/avatar/978ec0c47934c4b04401a8f4b4fec8bd?s=32&d=identicon&r=PG&f=1" style="height:320px; padding:10px" class="hidden">
<img id="3" src="https://lh3.googleusercontent.com/-uIr21N5ccCk/AAAAAAAAAAI/AAAAAAAAHeg/ohNEkpJKXQA/photo.jpg?sz=32" style="height:320px; padding:10px" class="hidden">
<button>1</button>
<button>2</button>
<button>3</button>
Problems with your original code include:
You're trying to select the elements before they exist in the DOM
Elements do not have a display property - in order to check the style of an element, you have to access its .style property first (eg, someImage.style.display)
Similarly, to set the style of an element, you have to set a property of its style property (eg someImage.style.display = <newDisplay>). Setting the display attribute of the element won't do anything.
Try to avoid inline handlers if at all possible - they have many problems and are pretty much universally considered to be quite poor practice. Always attach listeners properly using Javascript instead, whenever that's an option.
The event listener is the better solution, but if you want to see a working code in your way:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>switchpics</title>
</head>
<script type="text/javascript">
var open = function(param) {
img = document.getElementById(param.innerHTML);
if (img.style.display == 'none'){
img.style.display = "block";
} else {
img.style.display = "none";
};
};
</script>
<body>
<img id="1" src="1.jpg" style="height:20px; display:block; padding:10px">
<img id="2" src="1.jpg" style="height:20px; display:none; padding:10px">
<img id="3" src="1.jpg" style="height:20px; display:none; padding:10px">
<button onclick="open(this)">1</button>
<button onclick="open(this)">2</button>
<button onclick="open(this)">3</button>
</body>
</html>
I'm supposed to add script to an HTML file so that when I click the first star in the star rating system, it will change the src to 'star-on.png' as opposed to 'star-off.png'. That, I can do. But I can't figure out how to make it so that if the user clicks the second star, it will change the src for both the first and the second star to 'star-on.png'.
Here's the code that my teacher provided:
<!-- 1. PUT YOUR NAME IN THIS COMMENT -->
<html>
<head>
<!-- 2. DO NOT EDIT THE CSS -->
<style type="text/css">
body {
margin: 0;
}
div {
width: 520px;
display: block;
margin-left: auto;
margin-right: auto;
}
img {
width: 100px;
}
</style>
<!-- 2.5 YOU MAY ALTER THE STYLING OF THE BUTTON IF YOU WISH. -->
<style type="text/css">
button {
width: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<!-- 3. DO NOT ALTER THE HTML EXCEPT TO ADD ONCLICK, ONLOAD, AND SIMILAR ATTRIBUTES -->
<!-- AS NEEDED -->
<body>
<div>
<img src="star-off.png" id="one" class="2">
<img src="star-off.png" id="two" class="2">
<img src="star-off.png" id="three">
<img src="star-off.png" id="four">
<img src="star-off.png" id="five">
</div>
<button id="reset" onclick="document.getElementById('one').src='star-off.png'">Reset</button>
<!-- 4. YOU MAY PUT YOUR SCRIPTING HERE -->
<script>
document.getElementById('one').onclick = function () {
document.getElementById('one').src="star-on.png";
}
document.getElementById('two').onclick = function () {
document.getElementById('two').src="star-on.png";
}
document.getElementById('three').onclick = function () {
document.getElementById('three').src="star-on.png";
}
document.getElementById('four').onclick = function () {
document.getElementById('four').src="star-on.png";
}
document.getElementById('five').onclick = function () {
document.getElementById('five').src="star-on.png";
}
</script>
</body>
</html>
Except for the things inside the script tag and the onclick inside of the button, it's all my teacher's code.
This is what it looks like:
Well, you've really got most of what you're trying to do in your script already. Look at each of these lines:
document.getElementById('one').onclick = function () {
document.getElementById('one').src="star-on.png";
}
document.getElementById('two').onclick = function () {
document.getElementById('two').src="star-on.png";
}
document.getElementById('three').onclick = function () {
document.getElementById('three').src="star-on.png";
}
document.getElementById('four').onclick = function () {
document.getElementById('four').src="star-on.png";
}
document.getElementById('five').onclick = function () {
document.getElementById('five').src="star-on.png";
}
Essentially, each one is saying select the element by its Id attribute, identified in the preceding group by the 'id=""' in this part:
<img src="star-off.png" id="one" class="2">
<img src="star-off.png" id="two" class="2">
<img src="star-off.png" id="three">
<img src="star-off.png" id="four">
<img src="star-off.png" id="five">
and then attach an onclick event to it. When that onclick event fires, do the function that you've defined to the right of each of the equal signs following the event specification.
Inside each of your functions, it is simply going to identify the element on the DOM that matches the element id you're providing (just as you already did to assign the event handler in the previous section) and you're going to change the value for its 'src' attribute to the string you're defining on the right side of the equals.
Take the second one, per your request. Here's the HTML you're referencing (for both the first and second stars):
<img src="star-off.png" id="one" class="2">
<img src="star-off.png" id="two" class="2">
And here is the event handler you've already got in place for the second one:
document.getElementById('two').onclick = function () {
document.getElementById('two').src="star-on.png";
}
Right now if you click on that second star, you're only changing the src attribute of the element with an ID of 'two' to the 'star-on.png' image. So, if you want to also change the element of the star before it, it's got an ID of 'one', so you'll need to add this line within the event handler.
document.getElementById('one').src = "star-on.png";
Sure, there are more efficient ways to do this, but undoubtedly you'll learn about them as your course progresses. Here's what your event handler will look like with this update:
document.getElementById('two').onclick = function () {
document.getElementById('two').src="star-on.png";
document.getElementById('one').src = "star-on.png";
}
I'm new to this but I'm sure this is an easy one. I'm trying to setup multiple animated image buttons on my website. I setup two test buttons, but only the second one is working. Both of them works fine by themselves but when I add them together only one works. What am I missing? Thanks in advance.
HTML:
<html>
<head>
<title>Default</title><script type="text/javascript" src="script.js"></script>
</head>
<body>
<div align="center"><br>
<img style="border: 0px solid ; width: 60px; height:60px;" alt="" src="clickA1.png" id="button1" onmouseover="rollover()" onmouseout="rollout()" onmousedown="down()" onmouseup="rollover()">
</div>
<br />
<div align="center"><br>
<img style="border: 0px solid ; width: 60px; height: 60px;" alt="" src="clickB1.png" id="button2" onmouseover="rollover()" onmouseout="rollout()" onmousedown="down()" onmouseup="rollover()">
</div>
<br />
</body></html>
Javascript:
<script>
function rollover () {
document.getElementById ("button1") .src = "clickA2.png"
}
function rollover () {
document.getElementById ("button2") .src = "clickB2.png"
}
function rollout () {
document.getElementById ("button1") .src = "clickA1.png"
}
function rollout () {
document.getElementById ("button2") .src = "clickB1.png"
}
function down () {
document.getElementById ("button1") .src = "clickA3.png"
}
function down () {
document.getElementById ("button2") .src = "clickB3.png"
}
</script>
You functions are over riding each other. Define a different name for the functions of button2
for example:
function rollover () {
document.getElementById ("button1") .src = "clickA2.png"
}
function rollover2 () {
document.getElementById ("button2") .src = "clickB2.png"
}
You have used multiple functions with the same name. In these cases functions written later overwrites the previous ones in the same scope.
A possible way is to include arguments inside your function calls
<button ... onmousedown="down('button1')" ...></button>
<button ... onmousedown="down('button2')" ...></button>
and handle them inside your function.
function down (button) {
document.getElementById (button) .src = "clickB3.png"
}
Or you can also detect which button was pressed from mousedown event.
You are writing two functions with the same name but different body. The 2nd one replaces the 1st implementation.
I'm trying to use jQuery's .toggle() to show and hide one of three divs. The divs have unique ids and the decision which div is got toggled is based on which of the three radio buttons has been selected. The three radio buttons have values that correspond to the ids of the divs. So if someone clicks the -1 radio, the div with the id cMB_0292_A07.m1 should be toggled.
However I'm not getting any response at all and there's no report of any errors in debugger that I've tried. What is wrong?
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function showdiv(obj) {
var n = obj.name;
var v = $("input:radio[name='" + n + "']:checked").val();
alert(v);
$("#" + v).toggle();
}
</script>
</head>
<body>
<input name="cMB_0292_A07" value="cMB_0292_A07.m1" onclick="showdiv(this);" type="radio">-1
<input name="cMB_0292_A07" value="cMB_0292_A07.0" onclick="showdiv(this);" type="radio">0
<input name="cMB_0292_A07" value="cMB_0292_A07.p1" onclick="showdiv(this);" type="radio">+1
<div id="cMB_0292_A07.m1" style="display: none">minus1</div>
<div id="cMB_0292_A07.0" style="display: none">zero</div>
<div id="cMB_0292_A07.p1" style="display: none">plus1</div>
</body>
</html>
This is actually a two part issue
First off, you shouldn't have . within IDs.
Secondly, jQuery is seeing this: $('#ID.CLASS')
It is searching the DOM looking for ID: cMB_0292_A07then a child class of m1 for example.
You can fix this, by either removing the periods within your IDs, or using the regex selector [id=""].
$('[id="' + v + '"]').toggle();
jsFiddle DEMO
Other sidenotes, don't use onClick events. It's better to separate your business logic & presentation logic. Use jQuery .on('click', function () {}); events!
You cannot use ., since it will look for its child with class m1 or 0 or p1.
Check out below code snippet:
$(document).ready(function(){
$("input[type='radio']").click(function(){
alert($("#"+$(this).val()).length);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="cMB_0292_A07" value="cMB_0292_A07" type="radio">-1
<input name="cMB_0292_A07" value="cMB_0292_A07" type="radio">0
<input name="cMB_0292_A07" value="cMB_0292_A07" type="radio">+1
<div id="cMB_0292_A07" style="display: none">minus1</div>
<div id="cMB_0292_A07" style="display: none">zero</div>
<div id="cMB_0292_A07" style="display: none">plus1</div>
Can someone show me whats wrong with this:
<html>
<script type = "text/javascript">
function colourGreen()
{
document.getElementById("button1").style.bgColor = 0xFFFF00;
}
</script>
<body>
<form action="">
<div id = "button1">
<input type="button" value="Colour">
</div id>
<div id = "button2">
<input type="button" value="Price up" onclick = "colourGreen()">
</div id>
<div id = "button3">
<input type="button" value="Price down">
</div id>
</form>
</body>
</html>
document.getElementById("button1").style.backgroundColor = '#FFFF00';
Try:
document.getElementById("button1").style.backgroundColor = '#00ff00';
It is backgroundColor not bgColor
You can create a css rule and change the className of the button to link to that rule.
<style type="text/css">
.buttonColor{
background-color: green;
}
</style>
<script type ="text/javascript">
function colourGreen() {
document.getElementById("button1").className = "buttonColor";
}
</script>
That way if you for some reason decide to change the color or the background you will not have to change it on every page. You will be able to change that one css file.
I'd try
.style.backgroundColor = 0xFFFF00;
I assume your divs are only as big as your buttons and are therefore hidden by the buttons themselves. Change the colour on you button itself instead of the div?
A neater and more reliable way to to edit css of items is using jquery selectors. $("#button1").css("background-color","#ff0000");
Be sure to include the jquery .js file before trying this or you'll get an object expected error.