Develop Reference

Append the textContent of every anchor of a class to it's href [duplicate]

This question already has answers here:
How to correctly iterate through getElementsByClassName
(10 answers)
Closed last month.
HTML (I'm writing in a combination of Markdown & HTML).
- Ex. **<a class="kanji">犬</a>が**好き ・ I like dogs.
- Ex. **<a class="kanji">私</a>は**オーケーです・**I am** okay
JavaScript
const kanjiAnchor = document.getElementsByClassName("kanji")
for (var i = 0; i < kanjiAnchor.length; i++) {
kanjiAnchor[i].href = `https://jisho.org/search/${kanjiAnchor.textContent}`
kanjiAnchor[i].target = "_blank"
}
The above code returns an href of "https://jisho.org/search/undefined". I was able to do this on a smaller scale only selecting a single anchor with `document.getElementById("kanji"), but I want this to be done to every anchor tag with the class "kanji".

You need to access the textContent of the current element rather than the collection of elements.
kanjiAnchor[i].href = `https://jisho.org/search/${kanjiAnchor[i].textContent}`

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"
})

add parameters to anchor tag via javascript [duplicate]

This question already has answers here:
how can the value of an href attribute be changed using javascript/css?
(4 answers)
Closed 4 years ago.
I want to add parameters to anchor tag via JavaScript. I do not want to use jQuery for this purpose. Here is my html anchor tag
<div class="u-right u-half">Register</div>
I am able to do this with jquery but I want to do this with JavaScript. Here is my jquery but I want to use JavaScript instead
jQuery('.u-right .u-button').attr("href", function(i, href) {
return href + '?page=search';
});
How I can do this with JavaScript ?

document.getElementById("placeholder").href += '?page=search';
<div class="u-right u-half" id="placeholder">
Register
</div>

Using getElementsByClassName() and setAttribute() you can do like below
var anchor = document.getElementsByClassName('u-button')[0];
anchor.setAttribute('href', anchor + '?page=search')
console.log(anchor);
<div class="u-right u-half">Register</div>

To make that happen for all anchors/elements that match some css selector:
[...document.querySelectorAll('.u-right .u-button')]
.forEach(node => node.href += '?page=search')
Old School js:
Array.prototype.slice.call(document.querySelectorAll(…))
.forEach(function (node) { … });

How can I remove a whole 'a' tag from a div using javascript? [duplicate]

This question already has answers here:
JavaScript DOM remove element
(4 answers)
Remove element by id
(19 answers)
Closed 8 years ago.
I'm using this widget/snippet:
<div class="tbnet-gadget">
<div id="tbnet-g4">Carregando...</div><a id="tbnet-link" href="http://www.tabeladobrasileirao.net/" target="_blank" class="tbnet-link" title="Tabela do Brasileirão">Tabela do Brasileirão</a>
<script async src="http://gadgetsparablog.com/ws/tabeladobrasileirao/script?funcao=g4&campeonato=serie-a" type="text/javascript"></script>
</div>
This widget forces a link on the bottom of it (Tabela do Brasileirão). If I change the href tag, the widget won't work.
I want to still use this widget, but I'm trying to remove that link from the bottom of it.
I managed to remove the href attribute using document.getElementById("tbnet-link").removeAttribute("href");, but the text "Tabela do Brasileirão" is still showing up.
This is how it looks like on JSFiddle: http://jsfiddle.net/3nhwf6tw/
How can I remove the whole <a id="tbnet-link"...Brasileirão</a> using javascript?
Thanks.
http://jsfiddle.net/3nhwf6tw/#&togetherjs=1DF8EF6xuh

How about just using CSS instead:
#tbnet-link{
display: none !important;
}
JSFiddle
Here is the non-CSS version (which is a bit ridiculous):
You can remove this:
<a id="tbnet-link" href="http://www.tabeladobrasileirao.net/" target="_blank" class="tbnet-link" title="Tabela do Brasileirão">Tabela do Brasileirão</a>
If you add this jQuery and remove the script in your html:
$.getJSON("http://54.207.27.130/ws//tabeladobrasileirao/g4.jsonp?callback=?&campeonato=serie-a&time=None", function(k) {
$("#tbnet-g4").html(k.html.replace(/\<script.*?\<\/script\>/, ""));
});
JSFiddle no-CSS

To remove the element:
var el = document.getElementById("tbnet-link");
el.parentNode.removeChild(el);
To just clear the text:
var el = document.getElementById("tbnet-link");
el.innerHTML = ""

If you're up for jQuery, it's really easy:
$(function(){
$("#tbnet-link").remove();
});

Jquery check element exists by data attribute matching only the start of a specific value [duplicate]

This question already has answers here:
How to select all elements with an attribute that starts with
(2 answers)
Closed 8 years ago.
I want to be able to check to see if a specific data attribute exists that starts with a specific value.
for example lets say i have the following HTML code:
<div data-attr="123ABC"></div>
<div data-attr="123456"><div>
<div data-attr="TEST"></div>
and then i want to find any use of the data tag of data-attr that starts with 123
if ($('[data-attr="123"]').length > 0) {
//do something
}
This appears to always return 0 as i have no data-attr="123" How would i make it so i can check for only that specific data attribute that starts with 123 and has anything after that?

here is how
if ($('[data-attr^="123"]').length > 0) {
//do something
}