Develop Reference

How to replace a href link of a specific web using Javascript?

I have many links from the same web but with different dirreciones
<a href="somelink.com/1" title="this link">
</a>
<a href="somelink.com/2" title="this link">
</a>
<a href="somelink.com/3" title="this link">
</a>
<a href="somelink.com/3" title="this link">
</a>
He tried to use the code but it does not work for me since he searches for a specific url and not all
var a = document.querySelector('a[href="somelink.com"]');
if (a) {
a.setAttribute('href', 'replacedlink.com')
}
<a href="somelink.com" title="this link">
</a>
How could I do it in a massive way and do it to all the url of a web site in estecifico for example: somelink.com

You could use an attribute selector ^= to check if the href starts with somelink.com. Then you could replace the url :
document.querySelectorAll('a[href^="somelink.com"]').forEach(
x => x.href = x.href.replace("somelink.com", "replacedlink.com")
);
<a href="somelink.com/1" title="this link">a
</a>
<a href="somelink.com/2" title="this link">b
</a>
<a href="somelink.com/3" title="this link">c
</a>
<a href="somelink.com/3" title="this link">d
</a>
<a href="otherlink.com/3" title="this link">e
</a>
If you want to replace the whole link, you could set the href attribute to the new link:
document.querySelectorAll('a[href^="somelink.com"]').forEach(
x => x.href = "replacedlink.com"
)
<a href="somelink.com/1" title="this link">a
</a>
<a href="somelink.com/2" title="this link">b
</a>
<a href="somelink.com/3" title="this link">c
</a>
<a href="somelink.com/3" title="this link">d
</a>
<a href="otherlink.com/3" title="this link">e
</a>

Try adding class to the links and then use get element by class and replace the link
my url
var i=document.getElementByClass("abc");
for(let j=0;j<i.length;j++){
i[j].href='newUrl';
}

For multiple items we can replace this way:
var a = document.querySelectorAll('.your_attr_class').forEach( (item)=>{
if(item.href.startsWith('http://somelink.com')){
item.href.replace('http://somelink.com','http://replacewith.com');
}
});

Select Form to Bootstrap jQuery

I have a form for a switch-styler system
<form method="post" action="index.php">
<input type="submit" name="switchstyle" value="Changer de style" />
<select name="css">
<option value="meteobell">Météobell</option>
<option value="noir">Sombre</option>
<option value="blanc">Blanc</option>
<option value="alternance">Jour Blanc / Nuit Sombre</option>
</select>
but I have since gone through a menu in jQuery bootstrap and would like to change it in this form:
<ul class="dropdown-menu ">
<form name="switchstyle" id="switchstyle" method="post" action="index.php">
<input type="hidden" name="css" id="css" value="" />
<li >
<a href="#" data-value="meteobell" data-target="#sidebar-left" data-toggle="push">
Météobell
</a>
</li>
<li>
<a href="#" data-value="noir" data-target="#sidebar-left" data-toggle="push">
Sombre
</a>
</li>
<li>
<a href="#" data-value="blanc" data-target="#sidebar-left" data-toggle="push">
Blanc
</a>
</li>
<li >
<a href="#" data-value="alternance" data-target="#sidebar-left" data-toggle="push">
Jour Blanc / Nuit Sombre
</a>
</li>
</form>
</ul>
<script>
$(function() {
$('.dropdown-menu li a').click(function() {
$('#css').val($(this).data('value'));
$('#switchstyle').submit();
});
});
</script>
and obviously it does not work. Here the PHP code from the style switcher, but the problem is not here.
<?PHP
if(isset($_POST['switchstyle']))
{
if(file_exists("./css/".$_POST['css'].".css")
{
setcookie('css', $_POST['css'], time()+(365*24*3600));
$switchcss = $_POST['css'];
}
}
elseif(isset($_COOKIE['css']))
{
$switchcss = $_COOKIE['css'];
}
else
{
$switchcss = "meteobell";
}
?>
In fact I want only submit the data-value in a $_POST, but not in a first form select html. I want submit my $_POST value with the Bootsrap dropdown-menu.

The solution:
In the PHP code replace:
if (isset ($ _ POST ['switchstyle']))
by
if (isset ($ _ POST [ 'css']))
We then shifts the name = "css" from the select to the input:
<form id = "switchstyle" method = "POST" action = "index.php">
<input id = "css" name = "css" type = "hidden">
and we add an onclick in the link by removing the href = "#" (otherwise it not works):
<li>
<a onclick="$('#css').val('meteobell'); $('#switchstyle').submit()" data-target="#sidebar-left" data-toggle="push">
Météobell
</a>
</ li>
If it can save others time ...

get html file from href and load it into the page using vanilla javascript

Let's say I have this menu:
<div class="dropdown-menu pull-left" aria- labelledby="dropdownMenuButton">
<a class="dropdown-item tuning-selection" id="guitar_standard" href="tunings/guitar_standard.html">Guitar(Standard)</a>
<a class="dropdown-item tuning-selection" id="guitar_drop_d" href="tunings/guitar_drop_d.html">Guitar(Drop D) </a>
<a class="dropdown-item tuning-selection" id="bass_standard" href="tunings/bass_standard.html">Bass Standard</a>
<a class="dropdown-item tuning-selection" id="mandolin_standard" href="tunings/mandolin_standard.html">Mandolin</a>
</div>
How could I load those HTML files into a separate div (with no page refresh) via Vanilla JS? I know jQuery is easier but I want to learn how to do it with Vanilla JS.

You can use <link> element with rel attribute set to "import" to load the document fragments before click on element in document.body, and set content of <div> to cloned element of link.import #document.
<link rel="import" href="data:text/html,<div><h1>guitar standard</h1></div>" id="guitar_standard">
<div class="dropdown-menu pull-left" aria- labelledby="dropdownMenuButton">
<a class="dropdown-item tuning-selection" href="#guitar_standard">Guitar(Standard)</a>
</div>
<div id="content"></div>
<script>
const content = document.getElementById("content");
const links = document.links;
const imports = document.querySelectorAll("link[rel=import]");
for (const link of links) {
link.onclick = (e) => {
e.preventDefault();
e.stopImmediatePropagation();
const clone = document.querySelector(e.target.hash).import
.querySelector("div").cloneNode(true);
content.appendChild(clone);
}
}
</script>

Context Menu not working in ANGULARJS

I am trying to add context menu but value is not populating.
<div class="m-l">
<a class="item-country text-orange" href="#/app/CountryIps/{{item.data['name']}}/cCode/{{item.data['country-code']}}" target="_blank">
{{item['data']['name']}}
</a>
<a class="item-ip" href="#/app/showIps/{{item.data['name']}}/ip/{{item.data['Ip']}}" target="_blank"><span context-menu="whiteList"> {{item.data['Ip']}}</span> </a>
{{item.data['type']}}
<a class="detail-icon" data-popup-open="popup-1" href="" ng-click="showModal(item)">
<i class="fa fa-info-circle"></i>
</a>
</div>
Javascript
$scope.whiteList = [
['Add to white list', function($itemScope, $event, ip) {
whiteList(ip);
}]
];
Now when I add context from template I got undefined in ip in controller.

<a onClick="window.location.href='your link'">

I fixed it by myself to checking values of the $itemscope.
$itemScope.$parent.item.data.Ip
To get the value of the IP from template to controllers.

Retrieve href attribute

My HTML page contains:
<a id="show" href="monlien1" onclick="show()"> Facebook</a>
<a id="show" href="monlien2" onclick="show()"> Twitter</a>
<a id="show" href="monlien3" onclick="show()"> Google</a>
I want to show the href attribute for each click. For example if I click on "Facebook", it will show monlien1, on "Twitter" monlien2, etc.
I tried this but it shows only the value of the first link, monlien1, even if I click on "Twitter" or "Google".
function show(){
var lien=$('#show').attr('href');
alert(''+lien+'');
}
How can I do this?

Start using classes (you shouldn't have the same ID multiple times, it will cause issues) also, pass in this as an argument:
<a class="show" href="monlien1" onclick="show(this)"> Facebook</a>
<a class="show" href="monlien2" onclick="show(this)"> Twitter</a>
<a class="show" href="monlien3" onclick="show(this)"> Google</a>
function show(obj) {
var lien = obj.href;
alert(''+lien+'');
}
Edit: Thanks #FelixKling -- the equivalent to $('#show').attr('href') is obj.getAttribute('href'). obj.href will return a full URL not the actual value of the href attribute.

You cannot have multiple elements with same ID. $('#show') will always select the first elements with that ID.
Give the elements a class and use jQuery to bind the event handler:
<a class="show" href="monlien1"> Facebook</a>
<a class="show" href="monlien2"> Twitter</a>
<a class="show" href="monlien3"> Google</a>
and
$('.show').click(function() {
alert($(this).attr('href'));
});
Learn about jQuery and event handling: http://learn.jquery.com/events/.