Develop Reference

Adding a link within .textContent in javascript?

<button type="button" onclick="myFunction()">日本語</button>
<script>
function myFunction() {
document.getElementsByClassName("childdiv")[0].childNodes[1].textContent="私について.link("Aboutme.html") | ギャラリー.link("Gallery.html") | 連絡.link("contact.html")";
}
</script>
<div class="childdiv">
<h3 id="english"> About me | Gallery | Contact</h3>
This is the code i currently use. Normal text works perfectly, but when using hyperlinks within .textContent the button doesn't even work. Does anyone know a solution?

EDIT: new code below to update text and buttons to Japanese onclick.
//we are targeting the current links by id
var a = document.getElementById('link1');
var b = document.getElementById('link2');
var c = document.getElementById('link3');
//this is for example text
var p = document.getElementById('example');
//this function will take English links/text and update to Japanese when button is clicked
function myFunction() {
p.innerHTML = "Links and text are now Japanese"
if (a) {
a.innerHTML = "私について";
a.href = "私について.link";
}
if (b) {
b.innerHTML = "私について";
b.href = "私について.link";
}
if (c) {
c.innerHTML = "連絡";
c.href = "連絡.link";
}
}
<button id="japanese" type="button" onclick="myFunction();">日本語</button>
<div id="childdiv">
<h3 id="english"> <a id="link1" href="Aboutme.html">About me</a> | <a id="link2" href="Gallery.html">Gallery</a> | <a id="link3" href="contact.html">Contact</a></h3>
</div>
<p id="example">Click Button to update links and text to Japanese</p>

Bind paired data in object to another element outside ng-repeat - angular

I have this array of objects that I need to work with:
$scope.pdfs = [
{ "pdf_title": "Corporate Hire", "attached_file": "http://file1.jpg"},
{ "pdf_title": "Wedding Hire", "attached_file": "http://file2.jpg"},
{ "pdf_title": "Filming Hire", "attached_file": "http://file3.jpg"}
];
The pdf_file value is ng-repeated in li's.
What I want to do is if that li is clicked, to push its paired to another div, say the src for an href.
Here are my workings, but not quite correct:
Controller function:
$scope.bindWithFile = function(value) {
var currentValue = $scope.corpResult = value;
// pdfs support
var pdfs = $scope.pdfs;
for (var i = pdfs.length - 1; i >= 0; i--) {
if (currentValue == hasOwnProperty(key[pdfs])) {
value[pdfs] = $scope.corpLinkHref;
}
};
Markup:
<div class="w-12" ng-controller="corpHireController">
<div class="c-6-set">
<ul>
<li ng-repeat="pdf in pdfs" class="col-7 link link-inherit" ng-click="bindWithFile(pdf.pdf_title)">{{::pdf.pdf_title}}</li>
</ul>
</div>
<div class="c-6-set">
<div class="w-12">
<i class="fs-4 col-7 icon icon-pdf"></i>
</div>
<span class="col-7 h4" ng-bind="corpResult"></span>
<button ng-href="{{::corpLinkHref}}" class="button green2-button smaller-letters full-width">Download</button>
</div>
</div>
What is needed:
Clicking on the titles on the left, binds the pdf_title under the pdf icon and binds the attached_file to the button's href

Instead of passing the title of the selected pdf, why not passing the whole object. This way you don't have to performance any find or search function.
Markup:
<div class="w-12" ng-controller="corpHireController">
<div class="c-6-set">
<ul>
<li ng-repeat="pdf in pdfs" class="col-7 link link-inherit"
ng-click="bindWithFile(pdf)">
{{::pdf.pdf_title}}
</li>
</ul>
</div>
<div class="c-6-set">
<div class="w-12">
<i class="fs-4 col-7 icon icon-pdf"></i>
</div>
<span class="col-7 h4" ng-bind="corpResult"></span>
<button ng-href="{{::corpLinkHref}}"
class="button green2-button smaller-letters full-width">
Download
</button>
</div>
</div>
Controller
$scope.bindWithFile = function(selectedPdf) {
$scope.corpResult = selectedPdf.pdf_title;
$scope.corpLinkHref = selectedPdf.attached_file;
}

How to get id of anchor tag, regardless of where it is in hierarchy?

I want to get the id/class/both of the anchor tag, regardless of where it falls in the tag hierarchy. Example below is strange but realistic for my purposes because our website is accessed through a CMS that I have no control over. If people add multiple levels of formatting at different times, the CMS likes to add new span's...
So, having the live with the above facts, I want to pin down specific anchor tags by their id/class/both, but I don't always know where they will be located in the tag drill-down.
<div id="div_id_A" class="div_class_A">
<div class="div_class_A">
<a href="#" id="anchor_id_A" class="anchor_class_A">
<span class="span_class_A">
<span id="span_id_B">
<span id="span_id_C" class="span_class_C">
<p>
Click Me
</p>
</span>
</span>
</span>
</a>
</div>
</div>
I have started off like such,
var dataLayer = dataLayer || [];
document.addEventListener('click', function(event) {
var telm = event.target.parentNode.className;
var delm = 'anchor_id_A';
console.log(telm);
if (telm == delm) {
dataLayer.push({
'youClicked': telm
});
console.log(dataLayer);
};
});
*WHERE: telm = target element; delm = desired element.
To clarify. I am specifying anchor for a reason, it is not simply for the example. As I am restricted by our CMS, I can't go in and add markup to pre-defined code (i.e. template), but I do need to know what link was clicked as exactly as possible (for Google Analytics), so that I can track down what users are ignoring, not seeing, or prefering.

You can navigate up the hierarchy until you reach the anchor element, then just read its ID.
See here:
var dataLayer = dataLayer || [];
document.addEventListener('click', function(event) {
var el = event.target;
while (el.parentElement && el.tagName != 'A') {
el = el.parentElement;
}
dataLayer.push({
'youClicked': el
});
console.log(dataLayer);
alert(el.id);
});
<div id="div_id_A" class="div_class_A">
<div class="div_class_A">
<a href="#" id="anchor_id_A" class="anchor_class_A">
<span class="span_class_A">
<span id="span_id_B">
<span id="span_id_C" class="span_class_C">
<p>Click Me</p>
</span>
</span>
</span>
</a>
</div>
</div>

What you're trying to achieve, is probably something like this :
var dataLayer = [];
document.addEventListener('click', function(event) {
var needle = 'anchor_class_A'; // The class of the element you're looking for
var closest = event.target.closest("." + needle);
if(closest && closest.id) {
dataLayer.push({
'youClicked': closest.id
});
alert(JSON.stringify(dataLayer, null, '\t'));
}
});
<div id="div_id_A" class="div_class_A">
<div class="div_class_A">
<a href="#" id="anchor_id_A" class="anchor_class_A">
<span class="span_class_A">
<span id="span_id_B">
<span id="span_id_C" class="span_class_C">
<p class="clicker">
Click Me
</p>
</span>
</span>
</span>
</a>
</div>
<div class="div_class_A">
<a href="#" id="anchor_id_X" class="anchor_class_A">
<span class="span_class_A">
<span id="span_id_Y">
<span id="span_id_Z" class="span_class_C">
<p class="clicker">
Click Me
</p>
</span>
</span>
</span>
</a>
</div>
</div>

Wrong result after compare select.val() and span.text()

I have a folowing problem.
On click button Filter I want get entries with selected city.
SO forbid me write big code, so I show only div with data. I think you can add select with options, if you want.
(Select id = "cityFilter" , options: Dnepr, Kharkiv, Lviv)
HTML:
<div id="data">
<div>
<a class="userEmail" href="#">user1#domain.ua </a>
<span> user1 </span>
<span> Dnepr </span>
<span><input type = "button" value = "x" /></span>
</div>
<div>
<a class="userEmail" href="#">user2#domain.ua </a>
<span> user2 </span>
<span> Kharkiv </span>
<span><input type = "button" value = "x" /></span>
</div>
<div>
<a class="userEmail" href="#"> user3#domain.ua </a>
<span> user3 </span>
<span> Lviv </span>
<span><input type = "button" value = "x" /></span>
</div>
<div>
<a class="userEmail" href="#"> user4#domain.ua </a>
<span> user4 </span>
<span> Dnepr </span>
<span><input type = "button" value = "x" /></span>
</div>
<div>
<a class="userEmail" href="#"> user5#domain.ua </a>
<span> user5 </span>
<span> Lviv </span>
<span><input type = "button" value = "x" /></span>
</div>
</div>
cityFilter.js (The description of the code in comments):
$(function() {
//click on button
$('body > input').on('click', function() {
//get selected value
var cityFilter = $('#cityFilter').val();
//sort out spans which contains city names
$('#data > div > a + span + span').each(function() {
//for check the received value
console.log($(this).text());
//compare selected value and span text
if ($(this).text() != cityFilter) {
console.log('true');
}
});
});
});
I got all true. Where is the problem ?

your spans have leading and trailing spaces
i.e. " abc " != "abc"
try the following instead:
if ($(this).text().trim() != cityFilter) {
console.log('true');
}

Push array into object inside loop

I'm trying to insert <span class=""> value inside an array arrChairs[], and insert this array inside an object room{}, obviously I'm doing it in the wrong way, because it isn't working, here are the codes:
html:
<div id="table">
<a href="" id="foo1">
<span class="chair1"></span>
<span class="chair2"></span>
<span class="chair3"></span>
<span class="chair4"></span>
</a>
<a href="" id="foo2">
<span class="chair1"></span>
<span class="chair2"></span>
</a>
<a href="" id="foo3">
<span class="chair1"></span>
<span class="chair2"></span>
<span class="chair3"></span>
</a>
</div>
js:
room = {},
arrChairs = [];
$('#table a').each(function(i){
tableId = $('#table a:eq('+i+')').attr('id');
room[tableId] = {};
$('#table a:eq('+i+') span').each(function(i){
arrChairs.push( $(this).attr('class') );
});
room[tableId].chairs = arrChairs;
});
I don't know why it isn't working.
This is what arrChair is return me on console.log:
['chair1','chair2', 'chair3', 'chair4', 'chair1', 'chair2', 'chair1', 'chair2', 'chair3']
It's concatenating all the content. Some help would be appreciated

You are putting <span class=""> all together since you don't initialize arrChairs for each <a> in the root <div>. Try with this instead:
room = {};
$('#table a').each(function(i){
tableId = $('#table a:eq('+i+')').attr('id');
room[tableId] = {};
var arrChairs = [];
$('#table a:eq('+i+') span').each(function(i){
arrChairs.push( $(this).attr('class') );
});
room[tableId].chairs = arrChairs;
});
An make the console.log for the room instead of arrChairs.
Hope this helps