Develop Reference

Assign a value of the pressed div [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I wanna create something like pixel art notepad but I can't get background-color from my divs(top left corner) when I am pressing on them and assign this value to the variable, then assign this value to the "current color" div(top right corner).
The screenshot of my app.
My code:
$(document).ready(function() {
createGrid(16);
$('#newGrid').click(function() {
refreshGrid();
});
$('.colorBoxes').click(function() {
var currentObject = event.target;
console.log(currentObject);
//here i'm trying to get the color of my clicked div
//(I'm really have no idea what to do)
variable = window.getComputedStyle(currentObject);
var containerForBackgroundColor = variable.getPropertyValue('background-color');
console.log(containerForBackgroundColor);
});
});

As you are using jQuery, you can access the background-color with the following code:
var containerForBackgroundColor = $(this).css('background-color');

Change the text of links with an specific class, using javascript [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am looking for a way to replace the text of all the links with an specific class, using javascript (not jquery). I would like all the links with that specific class, to have a generic text such as: "click here".

I would use getElementsByClassName to acquire an array of the links. You can then loop through these elements making any changes required.
Heres a Fiddle that also includes some validation to only chenge the text of anchor tags in case you use targetClass for anything else in other elements.
EDIT: looks like other beat me to it :-) (also fixing type in function)

var links = document.querySelectorAll(".yourclass");
for (var i=0; i<links.length; links++)
{
links[i].innerHTML = "click here";
}

This should do the trick. It's using ES6, so make sure you're using either Chrome Canary or a transpiler like Babel.
Say this is your markup...
<a class="classname" href="#">STUBBED</a>
<a class="classname" href="#">MOCKED</a>
<a class="classname" href="#">PLACEHOLDER</a>
This as your JS should work...
let refs = document.getElementsByClassName('classname');
refs = [].slice.apply(refs);
refs.forEach(ref => ref.innerHTML = 'click here');

function myFunction() {
var c = document.querySelectorAll(".example>a");
for(i=0;i<c.length;i++)
{
c[i].innerHTML = "Click Me!";
}
}
This should do the trick in pure javascript

2 lines of Javascript on top of Jquery doesnt work? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am kinda new to Javascript and Jquery and all I wanted to do is a simple test for a navigation bar. I am trying to figure out why my Jquery doesnt work at all...and when I erase my 2 first lines of Javascript, everything works fine...what the hell??? Someone can explain me why is it like this??
My html :
<div id="navbar">
<ul class="ulbar">
<li id="libar">a
<div id="navbar2"></div>
</li>
</ul>
</div>
My JS and Jquery (on same .js):
var buttonA = document.getElementById("libar");
var buttonB = document.getElementById("navbar2");
$(".libar").click(function(){
$(".navbar2").hide("slow", function() {
alert("test");
});
});
Thank you all

try
$(buttonA).click(function(){
$(".navbar2").hide("slow", function() {
alert("test");
});
});

You are gettin the dom elements BY ID first, and referencing later BY CLASS.

I guess you are not able to differentiate between the "class" and "id" attribute.
// IN JavaScript
var buttonA = document.getElementById("libar").value;
// Using jquery, you shall rewrite it as
var buttonA = $('#libar').val();
So in jquery "id" attribute of html elements are accessed by using "#" where as "class" attributes are access by using ".".
Hope that helps.

try this
var buttonA = document.getElementsByClassName("libar");
var buttonB = document.getElementsByClassName("navbar2");
instead of
var buttonA = document.getElementById("libar");
var buttonB = document.getElementById("navbar2");
I think you have class in your html, not id
OR
You need to add id in html

Clear content in textbox onclick of image [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Can anyone help here for clearing the contents in textbox. I have tried to clear the contents in text box on click of an image using javascript
<input name="newKey" id="newKey" type="text" value="helo" size="38" maxlength="45"/>
<span class="btnClr" id="clear" onclick=clearThis("newKey"></span>
function clearThis(target){
target.value= "";
}

You are clearing a string called 'target' :)
What you want to clear is the DOM element itself:
function clearThis(target) {
target = document.getElementById(target);
target.value = "";
}
Moreover, your onclick attribute needed quoting to not be ambiguous:
onclick='clearThis("search")'
Here is a working fiddle
On another note, consider using less obtrusive JavaScript. It is easier to maintain and develop. Debugging code inside attribute strings can be a real nightmare, and might create portability issues.
Something like:
var clear = document.getElementById("clear");
var search = document.getElementById("search");
function clearThis(element) {
element.value = "";
}
clear.onclick = function(){
clearThis(search);
}
And no JavaScript in your HTML
Here is a fiddle of that

USE GET ELEMENT BY ID.....http://jsfiddle.net/Q7fRB/230/
function clearThis(target){
document.getElementById(target).value= "";
}

working Fiddle
$("#clear").click(function(){
$("#newKey").val('');
});

you can simply do this
function clearThis(target){
document.getElementById(target).value = "";
}

Adding an Accordion-Like Setup? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 months ago.
Improve this question
I want to be able to add the whole Accordion Aspect to this code in jsFiddle. To where if you expand one, and then click on another it collapses the previous div and displays the most recently clicked.
Any idea of how I could accomplish this through this jsFiddle?
http://jsfiddle.net/zrbFE/
Thank you all!

http://jsfiddle.net/fAmWx/1/
This might help get you started in the right direction. The idea is to simplify and reuse class names and code.

I made this some time ago, think it will suit your needs: http://jsfiddle.net/aCaEG/2/

I like this library for that functionality:
http://flowplayer.org/tools/demos/tabs/accordion.html
Way lighter than jQuery UI, and works beautifully. Check that page for examples of how to mark it up and call it in your script.

Try this for your jsfiddle:
function toggleMe(me) {
var alreadyOpen = me.is(':visible');
jQuery('div[class^="content-"]').hide('fast');
if (!alreadyOpen) {
me.show('slow');
}
}
jQuery('.expand-one').click(function() {
toggleMe(jQuery('.content-one'));
var img = $(this).find('img'),
src = img.attr("src"),
alt = img.data("altsrc");
img.attr("src", alt).data("altsrc", src);
});
/// SECOND SESSION:
/////////////////////////////////////////////////////////////////////////////////////
jQuery('.expand-two').click(function() {
toggleMe(jQuery('.content-two'));
var img = $(this).find('img'),
src = img.attr("src"),
alt = img.data("altsrc");
img.attr("src", alt).data("altsrc", src);
});
Hope this helps,
Pete