Develop Reference

Only first button works, but they are all set to do the same [duplicate]

This question already has answers here:
JavaScript and getElementById for multiple elements with the same ID
(13 answers)
Get multiple elements by Id
(14 answers)
Closed 1 year ago.
I am making a menu and I am currently implementing a feature where you can close the menu. I have three different menus inside of an overlay. When you close the menu I want the overlay to be display: none;. I have three buttons that do this (one for each menu). However, only the button at the top of the HTML code works. I know it is only the one at the top, because I tried deleting the one that was on the top, and then the second button would work since that is now the top button. I also tried giving different IDs, but that didn't make a difference.
Here is a shortened version of the parts of my code that I am talking about:
var overlay = document.getElementById("overlay");
var closeMenu = document.getElementById("closeMenu");
closeMenu.addEventListener('click', function() {
overlay.style = "display: none;";
});
<div class="overlay" id="overlay">
<div class="selectMenu" id="selectMenu">
<div class="h2Wrapper">
<h2>Create Canvas</h2>
<button type="button" name="button" class="closeMenu fas fa-times" id="closeMenu"></button>
</div>
</div>
<div class="selectMenu2" id="selectMenu2">
<div class="h2Wrapper">
<h2>Upload Image</h2>
<button type="button" name="button" class="closeMenu fas fa-times" id="closeMenu"></button>
</div>
</div>
<div class="selectMenu3" id="selectMenu3">
<div class="h2Wrapper">
<h2>Create Blank</h2>
<button type="button" name="button" class="closeMenu fas fa-times" id="closeMenu"></button>
</div>
</div>
</div>

First of all, the attribute id must be unique in a document, use class instead. Then you can target all the element with the class to loop through them and attach the event individually:
var overlay = document.getElementById("overlay");
var closeMenu = document.querySelectorAll(".closeMenu");
closeMenu.forEach(function(cm){
cm.addEventListener('click', function() {
overlay.style = "display: none;";
});
});
<div class="overlay" id="overlay">
<div class="selectMenu" id="selectMenu">
<div class="h2Wrapper">
<h2>Create Canvas</h2>
<button type="button" name="button" class="closeMenu fas fa-times" class="closeMenu"></button>
</div>
</div>
<div class="selectMenu2" id="selectMenu2">
<div class="h2Wrapper">
<h2>Upload Image</h2>
<button type="button" name="button" class="closeMenu fas fa-times" class="closeMenu"></button>
</div>
</div>
<div class="selectMenu3" id="selectMenu3">
<div class="h2Wrapper">
<h2>Create Blank</h2>
<button type="button" name="button" class="closeMenu fas fa-times" class="closeMenu"></button>
</div>
</div>
</div>

How to use jQuery to add new HTML to the top?

When the button is clicked, I want the new reply to be added to the top by update time desc.
For example, I added three replies. New reply 3 should on the top.
I tried two methods. It seems like after the page is loaded, click button function can not obtain the new added html.
$(document).ready(function() {
$('[id ^="submitCommentButton"]').click(function() {
$('#top').append('<div style="background-color:red"> New reply number </div>'); // method 1
// $('<div style="background-color:red> New reply number </div>').insertBefore($('#reply_container').children('.each').first()); // method 2
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="top"></div>
<div id="reply_container">
<div id="reply1" class="each">
<div>reply1</div>
<button type="button" id="submit1">Submit</button>
</div>
<div id="reply5" class="each">
<div>reply5</div>
<button type="button" id="submit5">Submit</button>
</div>
<div id="reply20" class="each">
<div>reply20</div>
<button type="button" id="submit20">Submit</button>
</div>
</div>

Your code: $('#top').append(' will add the given html to the end of the selected tag.
You need prepend()
$('#top').prepend('<div style="background-color:red"> New reply number </div>');

I think this is what you want:
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<div id="top"></div>
<div id="reply_container">
<div id="reply1" class="each">
<div>reply1</div>
<button type="button" id="submit1">Submit</button>
</div>
<div id="reply5" class="each">
<div>reply5</div>
<button type="button" id="submit5">Submit</button>
</div>
<div id="reply20" class="each">
<div>reply20</div>
<button type="button" id="submit20">Submit</button>
</div>
</div>
<script>
$(document).ready(function() {
$('button').click( function(){
$('#reply1').prepend('<div style="background-color:red"> New reply number </div>');
});
});
</script>
second way to add HTML:
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<div id="top"></div>
<div id="reply_container">
<div id="reply1" class="each">
<div>reply1</div>
<button type="button" id="submit1">Submit</button>
</div>
<div id="reply5" class="each">
<div>reply5</div>
<button type="button" id="submit5">Submit</button>
</div>
<div id="reply20" class="each">
<div>reply20</div>
<button type="button" id="submit20">Submit</button>
</div>
</div>
<script>
$(document).ready(function() {
$('button').click( function(){
$('<div style="background-color:red"> New reply number </div>').insertBefore('#reply1');
});
});
</script>

Advice in making a color picker code for a certain function

I have a code for picking a few colors using <button> for html. Is there any way to turn this into color picker? I don't know how to get the value from the color picker to be used in a javascript function. Can anyone help me? Here are the codes that I have right now.
html
<span id="colors" >
<button class="black" id="#000000"> </button>
<button class="white" id = '#FFFFFF'> </button>
<button class="blue" id = '#0000FF'> </button>
<button class="red" id = '#FF0000'> </button>
<button class="yellow" id = '#FFFF00'> </button>
<button class="green" id = '#008000'> </button>
<button class="purple" id = '#800080'> </button>
<input type="hidden" id="color_value_form">
</span>
and here is the function in the javascript file.
$('#colors button').on('click', function(){
tmp_ctx.strokeStyle = $(this).attr('id');
tmp_ctx.fillStyle = tmp_ctx.strokeStyle;
console.log(tmp_ctx.strokeStyle);
drawBrush();
})

Not sure what exactly you are trying to accomplish, but here is something to start you off.
$('#colors button').on('click', function(){
document.body.style.background = $(this).data('color');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colors">
<button class="black" data-color="#000000">black</button>
<button class="white" data-color='#FFFFFF'>white </button>
<button class="blue" data-color='#0000FF'>blue</button>
<button class="red" data-color='#FF0000'>red</button>
<button class="yellow" data-color='#FFFF00'>yellow </button>
<button class="green" data-color='#008000'> green</button>
<button class="purple" data-color='#800080'>purple </button>
</div>

html5 has colorpicker as well
<input id="html5colorpicker" type="color">
in js:
$("#html5colorpicker").value //is a string like "#000000"

Disable entire DIV using Javascript/JQuery

I have following DIV which shows some controls:
<div id="buttonrow" class="buttonrow">
<div class="Add" title="Add">
<div class="AddButton">
<input id="images" name="images" title="Add Photos" multiple="multiple" type="file">
</div>
<div class="AddText">
Add
</div>
</div>
<div class="Upload" title="Upload">
<div class="UploadButton">
<button id="start" type="submit" title="Upload Photos">
</button>
</div>
<div class="UploadText">
Upload
</div>
</div>
<div class="Clear" title="Clear">
<div class="ClearButton">
<button id="reset" type="reset" title="Clear Photos">
</button>
</div>
<div class="ClearText">
Clear
</div>
</div>
<div class="Delete" title="Delete">
<div class="DeleteButton">
<button id="delete" type="button" title="Delete Photos">
</button>
</div>
<div class="DeleteText">
Delete
</div>
</div>
<div id="SelectAll">
<input title="Select All Images" id="selectAllCB" type="checkbox">
</div>
<div id="dragandrophandler">
Drag & Drop Your Photos Here
</div>
<div id="ImagesCount">
</div>
<div id="Loading" class="Loading">
<img alt="loading" src="../customcontrol/progress.gif">
<div>
Loading...</div>
</div>
</div>
I need to know how can I disable this entire DIV using Javascript/JQuery function?
EDIT: To disable DIV means user should not be able to interact with DIV controls. They must be in read-only state (non-clickable). I dont want to hide DIV!

in Javascript, you can use:
<script lnaguage="javascript">
document.getElementById('buttonrow').style.display='none';
</script>

use:
$("#buttonrow *").attr("disabled", "disabled").off('click');

Try this with .prop():
$("#buttonrow :input").prop("disabled", true);
:input will select all input elems including text, textarea, button, select etc.

$("button, input",$("#buttonrow")).attr("disabled", "disabled");

Can you please try this:
$("#buttonrow").each(function()
{
$(this).prop('disbaled',true);
});
Hope this helps..

$('#buttonrow').on('click', function(){
$(this).css({ 'opacity': 0.7 });
return false;
})

Jquery each function target children of div

I am trying to target all buttons, that are children of a div with the class 'actions'.
I want my function to take the values from onclick, filter out letters and special chars, and add the numbers to an array.
The function works, when i try to target the buttons OUTSIDE the div, but not when i try to target .actions button.
Anyone have any ideas?
Fiddle: http://jsfiddle.net/Teilmann/wN79n/5/
html:
<div class="actions">
<button onclick="addToCart(1337, 'something');" />
</div>
<div class="actions">
<button onclick="addToCart(1338, 'something');" />
</div>
<div class="actions">
<button onclick="addToCart(1339, 'something');" />
</div>
js:
var products = new Array();
jQuery('.actions button').each(function(){
var id = jQuery(this).getAttribute('onclick');
products.push(id.replace(/[^0-9]/g, ''));
});
alert(products);

Your html is incorrect <button/> it needs to be <button></button> and getAttribute has to be .attr()
HTML
<button onclick="str1" ></button> <!--changed html here from <button/>-->
<button onclick="2" ></button> <!--changed html here from <button/>-->
<button onclick="addToCart(1234, 'something');" ></button> <!--changed html here from <button/>-->
<div class="actions">
<button onclick="addToCart(1337, 'something');" />
</div>
<div class="actions">
<button onclick="addToCart(1338, 'something');" />
</div>
<div class="actions">
<button onclick="addToCart(1339, 'something');" />
</div>
jQuery
var products = new Array();
jQuery('.actions button').each(function(){
var id = jQuery(this).attr('onclick');
products.push(id.replace(/[^0-9]/g, ''));
});
alert(products);
DEMO
If you don't close the button with </button> the html will automatically generate this markup
<button onclick="str1"></button>
<button onclick="2"></button>
<button onclick="addToCart(1234, 'something');">
<div class="actions"></div>
</button>
<button onclick="addToCart(1337, 'something');">
<div class="actions"></div>
</button>
<button onclick="addToCart(1338, 'something');">
<div class="actions"></div>
</button>
<button onclick="addToCart(1339, 'something');"></button>