We Keep Coding

set the value of child element to a parameter of parent element dynamically in javascript

This is my following code:
<div class="w3-container" id="menuTopics">
<button>
<a href="//somesite.com/someparam">
<img src="/images/keywordicons/leadership.svg" class="keyicon" />Leadership
</a>
</button>
<button>.......</button>
</div>
I want to set an onclick event for the button like this which will hold the value of the href attribute
<div class="w3-container" id="menuTopics">
<button onclick="window.location.href='//somesite.com/someparam'">
<a href="//somesite.com/someparam">
<img src="/images/keywordicons/leadership.svg" class="keyicon" />Leadership
</a>
</button>
<button>.......</button>
</div>
since href holds the value of the url, I want the same for onclick event. This is my requirement.
The following is the javascript I have written.
var getChilds = document.querySelectorAll("#menuTopics button");
getChilds.forEach(function (item) {
item.setAttribute('onclick', 'location.href=""');
})
However I donot know how to get the value of the href from a tag.

You need to grab the href value to assign it.
var getChilds = document.querySelectorAll("#menuTopics button");
var href = document.getElementsByTagName('a')[0].href;
getChilds.forEach(function(item) {
item.setAttribute('onclick', `location.href='${href}'`);
})
var buttons = document.getElementsByTagName('button');
console.log('these are your buttons with on click events', ...buttons)
<div class="w3-container" id="menuTopics">
<button>
<a href="//somesite.com/someparam">
<img src="/images/keywordicons/leadership.svg" class="keyicon" />Leadership
</a>
</button>
<button>.......</button>
</div>

Change link href/text to value of a textbox on button click?

I want to know if it's possible to have the text of an "a href" element to be the value of a textbox on a button click.
$("#btn").click(function(){
$("#myLink").text($("#Coordinate1").val());
$("#myLink").prop("href", "https://www.google.com/maps/place/" + $("#Coordinate1").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="Coordinate1">
<button id="btn">Click</button>
<a id="myLink" href="#"><!-- THIS MUST BE VALUE OF "Coordinate1" --></a>
I hope the explanation is clear enought.
Thank you.
SOLVED: Added the code on the chosen answer below. Thanks everyone for your help all the solutions given by members worked how I wanted.

You can use following code:
function setLink() {
var t = document.getElementById("Coordinate1").value;
var h = "https://www.google.com/maps/place/" + t;
var link = document.getElementById("myLink");
link.href = h; //set link url
link.innerText = h; //set link text (remove this line if you don't want it)
}
<input type="text" id="Coordinate1" oninput="setLink()">
<input type="button" value="get link" onclick="setLink()">
<div>
<a id="myLink" href="#"></a><!-- THIS MUST BE VALUE OF "Coordinate1" -->
</div>

Seem you want to do something like this.
$("#btn").click(function(){
$("#myLink").text($("#Coordinate1").val());
$("#myLink").prop("href", "https://www.google.com/maps/place/" + $("#Coordinate1").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Click</button>
<input type="text" id="Coordinate1">
<a id="myLink" href="#"><!-- THIS MUST BE VALUE OF "Coordinate1" --></a>

Yes, you can, but you have to do it when the user click something or finishes typing the link, or some other event. Here I use a button:
$("#change").click(function() { // when the button is clicked, change the href to whatever in the input + the root, and change it's text to the value as well
var value = $("#Coordinate1").val();
$("#myLink").prop("href", "https://www.google.com/maps/place/" + value) // change the href
.text(value); // change the text content
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="Coordinate1">
<a id="myLink" href="#">
<!-- THIS MUST BE VALUE OF "Coordinate1" -->
</a>
<button id="change">Change</button>

I believe that this is what you were asking for. I took the code you already had and just placed it within the click of a button element I added to the page. Also be sure to give an actual text value inside the a tag or it won't be clickable to the user.
$("#update").click(function() {
$("#myLink").prop("href", "https://www.google.com/maps/place/" + $("#Coordinate1").val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="Coordinate1">
<button id="update">update</button>
<a id="myLink" href="#">
Link
<!-- THIS MUST BE VALUE OF "Coordinate1" -->
</a>

Get the both "ID" and "HREF" attributes and create a JSON object

I have a dinamically generated code as follows which lists some files and let the user delete them by clicking on their links:
<div id="filenames">
<div>
<a id="1" class="delete" href="#1984.xls">1984.xls
</div>
<div>
<a id="2" class="delete" href="#1984.xml">1984.xml
</div>
</div>
Each file has its ID. The list is generated via AJAX when the user uploads the files.
When the user clicks a link, before the file is passed to the "delete.php" call, I would like to have a JSON object that lists all the files like this:
{1 : 1984.xls, 2 : 1984.xml}
I managed to made it using an array
var files = [];
$('#filenames').find('a').each(function() {
files.push($(this).attr('href'));
});
But this simply adds to the array the name of the file which is stored inside href.
I don't know how to find both id and attr and create instead of an array a JSON object as said above.

You can do it in following way:
var files = {};
$('#filenames').find('a').each(function() {
files[$(this).attr('id')] = $(this).attr('href');
});
console.log(files);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="filenames">
<div>
<a id="1" class="delete" href="#1984.xls">1984.xls
</div>
<div>
<a id="2" class="delete" href="#1984.xml">1984.xml
</div>
</div>

You have to create an object using {} (and not array []) then affect the key:value to it as files[key] = value when the key is the id of the link and value represented by the href, check the example below.
Hope this helps.
var files = {};
$('#filenames').find('a').each(function() {
var key = $(this).attr('id');
var value = $(this).attr('href');
files[key] = value;
});
console.log(files);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="filenames">
<div>
<a id="1" class="delete" href="#1984.xls">1984.xls
</div>
<div>
<a id="2" class="delete" href="#1984.xml">1984.xml
</div>
</div>

Use bracket-notation to assign value to the object when key is dynamic!
Initialize files as object({}), not as array as you are expecting result as an object
Note: Use .substr(1); if you are suppose to remove #(first character) from string.
var files = {};
$('#filenames').find('a').each(function(i) {
//files[i] = $(this).attr('href').substr(1);;//For index iteration as key
files[this.id] = $(this).attr('href').substr(1); //For ID attribute as key
});
console.log(files);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="filenames">
<div>
<a id="1" class="delete" href="#1984.xls">1984.xls</a>
</div>
<div>
<a id="2" class="delete" href="#1984.xml">1984.xml</a>
</div>
</div>

Please try this code
var files = [];
item = {}
$('#filenames').find('a').each(function () {
item[$(this).attr('id')] = $(this).attr('href');
});
files.push(item);
console.log(files);

How to find id of a comment in JS

I have code:
<a onclick="lel($(this),'212345555')" class="button">
<a onclick="lel($(this),'241214370')" class="button">
<a onclick="lel($(this),'248916550')" class="button">
<a onclick="lel($(this),'253234444')" class="button">
<a onclick="lel($(this),'248914570')" class="button">
And i want to execute all of this lel($(this),'id')in js at once, but i dont know how to get id of every button.

If u can manipulate server code to make like below
<a id="212345555" class="button">
<a id="241214370" class="button">
<a id="248916550" class="button">
<a id="253234444" class="button">
<a id="248914570" class="button">
and with jquery
$('a.button').click(function(){
let($(this),this.id);
});

Given the following HTML
<a onclick="lel($(this),'212345555')" class="button">
<a onclick="lel($(this),'241214370')" class="button">
<a onclick="lel($(this),'248916550')" class="button">
<a onclick="lel($(this),'253234444')" class="button">
<a onclick="lel($(this),'248914570')" class="button">
You can parse these identifiers using regular expressions and then run the lel operation on all of the parsed id's using the following Javascript
function gatherAndExecute() {
// iterate through each a.button that defines an onclick attribute
$('a.button[onclick]').each(function(i, e) {
// retrieve the onclick attribute
var rawId = e.attributes['onclick'].value;
// parse the identifier out of the attribute
var id = rawId.match(/lel\(\$\(this\),'(\d+)'\)/)[1];
// call the lel function
lel($(e), id);
});
}
Please see this fiddle for a working example: https://jsfiddle.net/k9376p5c/
As a cleaner alternative, if you have the ability to change the HTML outputted by your server, adding an id attribute to these elements will avoid the extra work of parsing the identifier.

Javascript Selecting child element not working

i m working on adding a FB share button to all my posts.
so i wanted to use the sharer.php? method with all the parameter retrieved from the post.
So my blog structure
<div id='postwrapper'>
<div id='title'>
hello</a>
</div>
<div id='da'>
<span>Posted on </span>
<span class='divider'></span>
<span>By</span>
</div>
<div class='post_content'>$row['post'] gud day</div>
<div id='post_footer'>
<a href=viewpost.php>Continue reading</a>
<a href='#' onClick='fbshare(this)'>Insert text or an image here.</a>
</div>
</div>
My javascript for fbshare function (not complete).
function fbshare(fb) {
var p1 = fb.parentNode;
var p2 = p1.parentNode;
var title = p2.getElementById("title").innerHTML;
alert(title);
}
Everytime i try this it says undefined is not a function

getElementById is a function of the document. Assuming you have more than one post on the page (ids must by unique), try using a class instead:
<div class='title'>
And using getElementsByClassName:
var title = p2.getElementsByClassName("title")[0].innerHTML;
http://jsfiddle.net/AJ9uj/