I want change the link attribute href of an existing link with another link using JavaScript. How can I do this?
Here is the link:
See moreSee moreSee more
I have tried the following but it doesn't work:
var links = document.getElementsByTagName('a');
var len = links.replace;
for(var i=0; i<replace; i++){
links[i].href = "newlink.php?+BLABLABAL";
}
Replace links.replace by links.length, since you are iterating over the links array.
Working code:
// This is an array of links
var links = document.getElementsByTagName('a');
// The length of the array
var len = links.length;
// Iterate over the array
for(var i = 0; i < len; i++){
links[i].href = "https://twitter.com";
}
Working demo: http://codepen.io/anon/pen/yYBdgQ
Change your js code with this :
var links = document.getElementsByTagName('a');
var len = links.length;
for(var i=0; i<len; i++){
links[i].href = "newlink.php?+BLABLABAL";
}
You have to take the length of links in var len, and then run the loop through len
Related
The current process of setting multiple inputs to disabled works for me, but seems to be way too much code due to the multiple for loops:
var textEditors = document.getElementsByClassName('textEditor'),
textareas = document.getElementsByTagName('textarea'),
radioInputs = document.getElementsByClassName('radioSelect'),
textInputs = document.getElementsByTagName('input');
for (var i = 0; i < textEditors.length; i++) {
textEditors[i].disabled = true;
}
for (var g = 0; g < textInputs.length; g++) {
textInputs[g].disabled = true;
}
for (var f = 0; f < textareas.length; f++) {
textareas[f].disabled = true;
}
for (var z = 0; z < radioInputs.length; z++) {
radioInputs[z].disabled = true;
}
But this above works fine for me. The below is what I would assume would work instead - put all elements into a single array, and iterate over a single array to set each to disabled. When I view the HTMLCollection via console.log it says disabled:true yet the element on the screen is not disabled. What am I missing here?
var textEditors = document.getElementsByClassName('textEditor'),
textareas = document.getElementsByTagName('textarea'),
radioInputs = document.getElementsByClassName('radioSelect'),
textInputs = document.getElementsByTagName('input');
var normalInputs = [];
normalInputs.push(textEditors);
normalInputs.push(textInputs);
normalInputs.push(radioInputs);
normalInputs.push(textareas);
for (var i = 0; i < normalInputs.length; i++) {
console.log(normalInputs[i])
normalInputs[i].disabled = true;
}
This will serve your purpose.
In your second method you're pushing the array capture from getElement into normalInputs array and than looping through that array and applying disable property on elements of inputArray which is eventually array of all the selected elements not individual element.
var textEditors = document.getElementsByClassName('textEditor'),
textareas = document.getElementsByTagName('textarea'),
radioInputs = document.getElementsByClassName('radioSelect'),
textInputs = document.getElementsByTagName('input');
var normalInputs = [];
normalInputs.push(textEditors);
normalInputs.push(textInputs);
normalInputs.push(radioInputs);
normalInputs.push(textareas);
normalInputs.forEach(e=>{
e.forEach(ele =>{
ele.disabled = true;
})
})
Without ES6
for (var i = 0; i < normalInputs.length; i++) {
for(let j=0; j< normalInputs[i].length; j++){
normalInputs[i][j].disabled = true;
}
}
A better approach is use concat
var normalInputs = [];
normalInputs = normalInputs.concat(textEditors,textInputs,radioInputs, textareas);
for(let i=0; i<normalInputs.length; i++){
normalInputs[i].disabled = true;
}
Well, give all of them same class like .inputs and get all of them with one expression:
var items = document.querySelectorAll( '.inputs' );
if it's not possible, get all of them like this:
var items = document.querySelectorAll( 'input, .textEditor, .radioSelect, textarea' );
then you can fix that with one loop for all of them:
for ( var i = 0; i < items.length; i++ )
items[ i ].disabled = true;
the snippt shows the XML detail : please referes to the image, shows the table...
<ExtractSummaryDateSet>
<_date>2017-09-20</_date>
<_portfolioSummaries>
<ExtractSummaryDateSetDetail>
<_portfolioName>52613661_CL</_portfolioName>
<_detail>
<Before>0</Before>
<After>-329</After>
<ChangeMaturing>0</ChangeMaturing>
<ChangeNew>-329</ChangeNew>
</_detail>
</ExtractSummaryDateSetDetail>
<ExtractSummaryDateSetDetail>
<_portfolioName>52613661_LP</_portfolioName>
<_detail>
<Before>0</Before>
<After>-329</After>
<ChangeMaturing>0</ChangeMaturing>
<ChangeNew>-329</ChangeNew>
</_detail>
</ExtractSummaryDateSetDetail>
<ExtractSummaryDateSetDetail>
<_portfolioName>526136|Total</_portfolioName>
<_detail>
<Before>0</Before>
<After>-329</After>
<ChangeMaturing>0</ChangeMaturing>
<ChangeNew>-329</ChangeNew>
</_detail>
</ExtractSummaryDateSetDetail>
I am trying to use 2 Dimential arrays in XML to create a table HTML
for (var i = 0; i < x.length; i++){
var row= x[i];
var date = row.getElementsByTagName("Date")[0].childNodes[0].nodeValue;
for(var j = 0;j < row.length; j++){
var before = row[j].getElementsByTagName("Before")[0].childNodes[0].nodeValue;
var after = row[j].getElementsByTagName("after")[0].childNodes[0].nodeValue;
}
}
just wanna know is the example above semantically correct?
in the second array can i use row[j] to call the array
for (var y = 0; y < x.length; y++){
for (var i = 0; i < x[i].length; i++){
table_summary +="<th></th><th></th><td>" + x[y][j].getElementsByTagName("_date")[0].childNodes[0].nodeValue + "</td>" ;
}
how do I pass the value correctly? x[y][i] can't not find the value.
I am working on XML format in web application and encounter to similar your issue. You can transform XML to HTML like your method but create HTML tags from XML is very cumbersome.
I suggest you use XSLT for this transform.
I created a simple XSLT for your XML and converted this transform very easily.
Please see Online transform and click html in result panel to see HTML output for your XML.
You can consider a multi dimensional array as an array of arrays.
so this is fine :
for (var i = 0; i < x.length; i++){
var row= x[i]
for(var j = 0;j < row.length; j++){
var before = row[j];
}
}
However you can also write this as :
for (var i = 0; i < x.length; i++) {
for(var j = 0;j < x[i].length; j++) {
var before = x[i][j];
}
}
var g = document.getElementById('my_div');
for (var i = 0, len = g.children.length; i < len; i++)
{
(function(i){
g.children[i].onclick = function(){
$('.galao')[i].attr('id','selectedGalao');
}
})(i);
};
So, I'm trying to get a element by his class and index position so I can add an id that I work with. The problem is the browser returns me:
Uncaught TypeError: Cannot read property 'attr' of undefined at HTMLDivElement.g.children.(anonymous function).onclick
How do I fix it?
EDIT
The code is actually like this:
var g = document.getElementById('my_div');
for (var i = 0, len = g.children.length; i < len; i++)
{
(function(index){
g.children[i].onclick = function(){
$('.galao')[index].attr('id','selectedGalao');
}
})(i);
};
This way:
var g = document.getElementById('my_div');
for (var i = 0, len = g.children.length; i < len; i++)
{
(function(){
g.children[i].onclick = function(){
$($('.galao')[i]).attr('id','selectedGalao');
}
})(i);
};
The elements inside a jquery array, aren't jquery objects, so you need to make them jquery objects too, to use jquery functions on them
If you are using jQuery, use it properly, it will optimize your code great deal:
$('#my_div').children().click(function() {
$('.galao').eq(i).addClass('selectedGalao');
})
Another advice, use class selectedGalao, not id, as id must be unique, and if multiple elements can get same selectedGalao id, this is not right.
Try something like this:
var g = $('#my_div');
for (var i = 0; i < g.children.length; i++) {
g.children()[i].on('click', function () {
$('.galao')[i].attr('id','selectedGalao');
});
};
<button id="mybtn">click me for index </button>
My JavaScript code:
var myarray = [2,4,6,5,5];
(i=0; i<= myarray.length; i++){
var allBtn = document.getElementByID("mybtn");
document.body.appendChild(allBtn);
}
I want to make multiple buttons, so i have used for loop to create those. but it is not working.
Here is the url: http://jsbin.com/donafuluha/1/edit?html,js,console,output
You can make use of cloneNode in order to append existing elements
Working Demo
Code:
var myarray = [2,4,6,5,5];
for(var i=0; i< myarray.length; i++){
var allBtn = document.getElementById("mybtn").cloneNode(true);
document.body.appendChild(allBtn);
}
you can use cloneNode() to copy it and append multiple. I also recommend you remove the node from the DOM and only show the clones on the screen. And looking at your array it seems you want to attach some data too. This is done by either assigning a property or using .setAttribute("name",value)
var myarray = [2,4,6,5,5];
var proto = document.getElementById("mybtn");
proto.parentElement.removeChild(proto);
for(var i=0; i<myarray.length; i++){
var allBtn = proto.cloneNode(true);
allBtn.setAttribute("data-index", myarray[i]);
document.body.appendChild(allBtn);
}
You should try following code snippet it will solve your problem
var myarray = [2,4,6,5,5];
for(var i=0; i<= myarray.length; i++){
var btn = document.createElement("BUTTON");
var t = document.createTextNode("New Button"+(i+1));
btn.appendChild(t);
document.body.appendChild(btn);
}
I'm new in web development. I converted the list of image names to an array by following codeL
var image_array = $("#image-ul img").map(function() {return $(this).attr("src");});
Now I want to show some of these images. I show all the images by adding following codeL
$('#image-ul img').css('display','block');
But I want some of the images, like the following:
for (var i=0; i<2; i++) { $('#image-ul img:image_array[i]').css('display','block');}
How can I do this?
You don't really use a for loop to do that, you select the images and limit the selection with eq(), lt(), gt() etc. So for anyting with an index lower than 2, you do :
$('#image-ul img:lt(2)').show();
Try
for (var i=0; i<2; i++) { $('#image-ul img:eq(' + i +')').css('display','block');}
Or
for (var i=0; i<2; i++) { $('#image-ul img').eq(i).css('display','block');}
Change this line
for (var i=0; i<2; i++) { $('#image-ul img:image_array[i]').css('display','block');}
to this
for (var i=0; i<2; i++) { $('#image-ul img').eq(i).show(); }
as Juhana pointed out .show() is the best way to show display an element with jQuery