We Keep Coding

show html element onclick event

I want to change the visibility of an element based onclick event of refreshA element
<a id="refreshA">Click here</a>
<a style="display: none;" id="refreshTab"> Info</a>
here is the js code
<script>
document.getElementById("refreshA").onclick(function () {
document.getElementById("refreshTab").style.display = 'block';
})
</script>

Try this:
function showhide(){
document.getElementById("refreshTab").style.display = 'block';
}
document.getElementById('refreshA').onclick=showhide;
See the working fiddle

function myFunction() {
document.getElementById("refreshTab").style.display = 'block';
}
<a id="refreshA" onclick="myFunction()">Click here</a>
<a style="display: none;" id="refreshTab"> Info</a>

Insert a descendant img element's src attribute into parent element's href attribute

I have the following html:
<a href="#">
<img src="img-1" />
</a>
<a href="#">
<img src="img-2" />
</a>
<a href="#">
<img src="img-3" />
</a>
What I am trying to do is for each one of the links I need to retrieve its child img src and insert that src into the href respectively.
So the end result would look like this:
<a href="img-1">
<img src="img-1" />
</a>
<a href="img-2">
<img src="img-2" />
</a>
<a href="img-3">
<img src="img-3" />
</a>
Thank you.

Iterate over each of the a elements that have img descendants, and grab the corresponding src attribute:
$('a:has(img)').each(function () {
this.href = $(this).find('img').attr('src');
});
Alternatively, you could also do this without jQuery:
var anchors = document.querySelectorAll('a');
Array.prototype.forEach.call(anchors, function (a) {
var img = a.querySelector('img');
a.href = img !== null ? a.querySelector('img').getAttribute('src') : a.href;
});

JavaScript solution: (I like native solutions 😉)
var images = document.getElementsByTagName("img")
for(var i = 0; i < images.length; ++i) {
if(images[i].parentElement && images[i].parentElement.tagName === "A")
images[i].parentElement.href = images[i].src
}
<a href="#">
<img src="img-1" />
</a>
<a href="#">
<img src="img-2" />
</a>
<a href="#">
<img src="img-3" />
</a>
It will get all Image-Elements in your document, and then apply its src to it's parents href attribute

javascript
var all_images=document.getElementsByTagName('img')
for(var i=0;i<all_images.length;++i){
all_images[i].parentNode.href=all_images[i].src;
console.log(all_images[i].parentNode.href)
}

How to call same method with different Ids

I have html controls of two sets with different ids in my page, when I click a tag I want to call DoSomething method.
<div>
<a href="javascript:void(0);" onclick="DoSomething();">
<span id="spnValue" >Value1</span>
</div>
<div>
<a href="javascript:void(0);" onclick="DoSomething();">
<span id="spnValue1">Value2</span>
</div>
function DoSomething() {
var htmlVal = "";
skuList = $("span[id*='spnValue']").html();
}
But whichever one I click it gives the Value1 in htmlVal. How can I distinguish and retrieve the value of method called

You can pass clicked element object to method:
<a href="javascript:void(0);" onclick="DoSomething(this);">
<span id="spnValue1">Value2</span>
</div>
and then use it for traversing to child span element:
function DoSomething(obj) {
var htmlVal = "";
skuList = $(obj).find('span').html();
}
Working Demo

<div>
<a href="javascript:void(0);" onclick="DoSomething(this);">
<span id="spnValue1">Value2</span>
</div>
function DoSomething(obj) {
var htmlVal = "";
skuList = $(obj).parent().find('span').html();
}

You can pass the current element in the function using that you can locate the span element which is a children on the a tag
<div>
<a href="javascript:void(0);" onclick="DoSomething(this);">
<span id="spnValue" >Value1</span>
</a>
</div>
<div>
<a href="javascript:void(0);" onclick="DoSomething(this);">
<span id="spnValue1">Value2</span>
</a>
</div>
function DoSomething(node) {
var htmlVal = "";
skuList = $(node).find('span').html();//for children
//skuList = $(node).next('span').html();//for siblings
}

Incrementing +1 the class in javascript

Hi im doing a PHP loop where I set a class, this loop make a list of items, and each one of them will have a "share" button that will open a window, (div display:none) the javascript open this div, and it works perfect..
My problem is that in this moment I have inserted the <script> code inside the loop so each item has its own <script></script> code...
Is there any way to do just one and take that code out of the php loop, so I can improve the code.
<script>
$('a.sharebtnc').click(
function(event) {
event.stopPropagation();
$('div.redescompartir').fadeToggle(300);
}
);
</script>
In the Loop well I just add to the class the id like this (id :32 )
<script>
$('a.sharebtnc32').click(
function(event) {
event.stopPropagation();
$('div.redescompartir32').fadeToggle(300);
}
);
</script>
How can I make this script works for all elements no matter the id number, I have no idea, but I know this is the correct way of doing this , right?
The HTML is very simple, its the same for each item... I mean each item has its own div with for <a href="" > </a> elements
<a href="#" class="sharebtnc(id)">
<div class="redescompartir(id)">
<a href="" >Twitter </a>
<a href="" >Facebook </a>
<a href="" >Google </a>
<a href="" >Foursquare </a>
</div>

Add a new class and attribute to the input element like
instead of
<a class="sharebtnc32" />
use
<a class="sharebtnc sharebtnc32" data-id="32"/>
then
jQuery(function ($) {
$('.sharebtnctl').click(function (event) {
event.stopPropagation();
$('.redesopenclose' + $(this).data('id')).fadeToggle(300);
});
})

My preferred method: PHP to generate link between the two elements, then a small snippet of JS to grab which particular one was clicked.
PHP:
$num = 100;
for ($x = 0; $x < $numItems; $x++) {
echo "
<a href='#' class='sharebtn' target='$x'>Share</a>
<div class='redescompartir' id='$x'>
<a href=''>Twitter</a>
<a href=''>Facebook</a>
<a href=''>Google</a>
<a href=''>Foursquare</a>
</div>
";
}
HTML output:
<a href="#" class="sharebtn" target='32'>Share</a>
<div class="redescompartir" id='32'>
<a href="" >Twitter </a>
<a href="" >Facebook </a>
<a href="" >Google </a>
<a href="" >Foursquare </a>
</div>
JS:
$('a.sharebtn').on('click', function(e) {
e.stopPropagation();
var target = $(e.currentTarget).attr('target');
$('#'+target).fadeToggle(300);
});
This way you only need a single <script></script> tag, which your user's broswers will thank you for. :)

javascript change image, href onclick = looking for simpliest method

What is the simpliest method to change image src, when I click on a href -with JQuery?
img id="my_image" class="icon" src="1.png" alt="1.png" border="0" />
< a href="#" id="1">
< a href="#" id="2">
< a href="#" id="3">
1.png, 2.png, 3.png
Href is OK with # or would be better to placce here some JS?

You should .bind()help a .click()help event listener on your anchors. In that listener, you change the src attribute by invoking .attr()help
$('a').click(function(event) {
$('#my_image').attr('src', function(i, src) {
return event.target.id + '.png';
});
return false;
});

<img id="my_image" class="icon" src="1.png" alt="1.png" border="0" />
<a onclick="changeImage(this)" href="#" id="1">1</a>
<a onclick="changeImage(this)" href="#" id="2">2</a>
<a onclick="changeImage(this)" href="#" id="3">3</a>
<script>
function changeImage(thisDiv){
document.getElementById('my_image').src = thisDiv.id+".png"
}
</script>
Edit: Didn't see the jQuery requirement!

This ought to work:
<a href="javascript:$('#my_image').attr('src', '2.png');" id="1">

$('a').click(function(e) {
var id = this.id;
$('#my_image').attr('src', id + '.png');
e.preventDefault();
});