Develop Reference

How using function with another Elements [duplicate]

This question already has answers here:
Get element from which onclick function is called
(9 answers)
Closed 1 year ago.
I want to color these elements using the same function. When I click on one of them, the same element that was clicked will be colored. How is that done using JavaScript
<button class="btn" onclick="color()">A</button>
<button class="btn"onclick="color()">B</button>

const $button = document.querySelector('.btn')
$button.addEventListener('click', () => {
$button.style.color = "#0099ff"
})

Change the background color using a loop [duplicate]

This question already has answers here:
Change background color with a loop onclick
(2 answers)
How to loop through an array to change background colours using JS?
(4 answers)
How to loop over an array of colors to change background on key(press/down)
(4 answers)
Closed 2 years ago.
I am trying to change the background color when the button is clicked. But instead of the color being changed sequentially when I click the button, it directly changes to the last one. How do I fix it by using for loop only.
but.addEventListener("click", clickfunction);
function clickfunction() {
color = arr.shift();
arr.push(color);
bgcolor.style.background = color;
but.style.color = color;
but.innerText = color;
comming[0].style.background = --color;
};

Cant use find on element textarea which is child of td [duplicate]

This question already has answers here:
`find()` undefined is not a function
(4 answers)
Closed 6 years ago.
I get an error on the line targetTD[6].find('textarea').text() saying targetTD[6].find is not a function. (In 'targetTD[6].find('textarea')', 'targetTD[6].find' is undefined)
$(document).ready(function () {
$(document.body).on('click','.edit',function () {// use button class ince ID has to be unique per button
var targetTD;
if( $(this).find('i').hasClass('glyphicon-edit'))
{
targetTD = $(this).parents('tr').find('td'); // gives all TDs of current row
if (targetTD[6].firstChild.children.length) // the value cell is what we want
{
// targetTD[6].firstChild.children.item().setAttribute('readonly','false');
alert(targetTD[6].find('textarea').text());
}
I am trying to find a text area within a <td><div> <textarea readonly> some text </textarea><div><td>. How can I remove the readonly property ? Why cant I use find ?

Try to replace:
targetTD[6].find('textarea').text();
With:
$(targetTD[6]).find('textarea').text();
Because targetTD is an array with not wrapped elements. Also, to remove readonly property use:
$(targetTD[6]).attr("readonly", false);

targetTD[6] is a native JavaScript node. You need to wrap it in a jQuery selector $()
Like so: $(targetTD[6]).find

class selectors on javascript generated content [duplicate]

This question already has answers here:
Click event doesn't work on dynamically generated elements [duplicate]
(20 answers)
Closed 8 years ago.
This was a dublicate question, George's link to a previous question had my answer
I'm having an issue where selectors aren't functioning with dynamically generated javascript content.
The initial works just fine. Once the for loop generates more div's, even though it's got the same class, the 'mouseover' css styling won't apply.
Code that Generates the divs:
for (x; x < y; x++) {
output = output + '<div class="over">'+
'But not for these generated divs'+
'</div>';
}
$("#content").html(output);
Code that styles the divs with class "over":
$(".over").hover(function () {
$(this).addClass("styling");
});
$(".over").mouseout(function () {
$(this).removeClass("styling");
});
http://jsfiddle.net/kjhansen/1e08ypms/28/

Use jQuery on() Try this:
$(document).on('mouseover','.over',function () {
$(this).addClass("styling");
});
$(document).on('mouseout','.over',function () {
$(this).removeClass("styling");
});
FIDDLE EXAMPLE

jquery attr() method not working [duplicate]

This question already has answers here:
How can I change the text color with jQuery?
(4 answers)
Closed 8 years ago.
I was just playing with the basics but I can't seem to get $('p').attr({color:red}); work.
I also tried using $('p').attr(color,red); but that didn't work either.Please help,here is the whole code btw:http://www.codecademy.com/pyAce14978/codebits/SKByZJ/edit

$('p').css({
color: 'red'
});
or
$('p').attr({
'style' : 'color:red;'
});

Use css not attr Function instead

That's because color is not an attribute of P. You need to change the CSS of P, not the "color attribute"
$('p').css('color','red');

Try this code:
var e = document.getElementsByTagName("p")[0, 1];
e.style.color = "red";

You better use css $('p').css('color', 'red');