I am trying to change content of the first cells of rows into some images. Below is my Javascript code which doesn't work. I tried to use p.appendChild(img), but as it's in a for loop, each time I pressed the button that invokes this, it will append another image to that row. I reckon that I am not using .src correctly? Can someone please help?
var rowx =document.getElementById(rowid); //the row that I want to change its first cell
var uri= "baseuri"+rowid;
img = document.createElement('img');
img.src= uri;
var p = rowx.cells[0];
p.src=img; //this doesn't change the first cell's content.if I use p.appendChild(img) it will append new img each time it gets executed.
cells gives you an HTMLCollection of td elements, which do not support a source attribute. if you want to edit the content you would need to append or modify its innerHTML, like
rowx.cells[0].innerHTML="";
rowx.cells[0].appendChild(img);
You don't need to create another image, you can simply change the src property of the current one:
rowx.cells[0].querySelector('img').src = uri;
If the image is the only (or 1st) element inside the cell, you can use firstElementChild, even better:
rowx.cells[0].firstElementChild.src = uri;
References: querySelector and firstElementChild
.
Related
I have an assignment where I need to make a photo appear when I click on another photo. I need to put each image in an array and call on it to appear when I click on the corresponding photo. When I click on another photo, I need to remove the existing photo and replace it with another one. I need to do it with Javascript and the DOM. I'm unsure how exactly I would do this. Here's my code so far:
var photoDiv = getElementById("photos");
document.getElementById("0").addEventListener("click", function () {
var img = createElement("img");
photoDiv.appendChild(img);
})
I know it's completely wrong but I don't know what to do to fix it :(
You have to add the image source of your image.
After this line:
var img = document.createElement("img");
img.src = 'pathto/yourimg.png_or_jpg'; // You need this.
Also, it's always a good practice to use document.getElementById() (or putting the parent) instead of just getElementById().
Instead of creating a new image you can also replace only the src of the image element, something like this:
// get the image
var imgElement = document.getElementById("myImage");
// add the listener
imgElement.addEventListener("click",
function () {
// update the src of the image
imgElement.src = "https://www.w3schools.com/html/img_girl.jpg";
});
and that's all, you should not create a new element and append it to the DOM element.
I have a Chrome extension that inserts a button onto HTML pages. I got it to add the button under one div. Now I'm trying to get it to add it under an image in that div, and it won't work — no errors, the button just doesn't appear. When I do console.log(image_div); it prints out the image object.
Version that works:
var uCW = jNode.closest("[role='article']");
uCW.append(button);
Version that doesn't work:
var image_div = $(uCW).find('[src^="https://external"]');
image_div.append(button);
uCW is the variable name I gave to the parent div, and image_div is the variable name I gave to the child within uCW that contains the image.
The problem that you are having is you are appending to a div successfully, but appending to an image is failing. The reason is you can't append to an image, you have to use 'after' since an image isn't an object that can content appended to the innerHTML of it.
So change this:
var image_div = $(uCW).find('[src^="https://external"]');
image_div.append(button);
to:
var image_div = $(uCW).find('[src^="https://external"]');
image_div.after(button);
I have this piece of code, which allows me to change the image by clicking on it.
$('img').click(function(){
var src = this.src;
this.src = src.indexOf('_b.jpg') == -1 ? src.replace('.jpg','_b.jpg') : src.replace('_b.jpg','.jpg');
});
I would prefer to click on another element to still be able to change the image. When I change the part in $('myelement'), I need to make sure that the part var src = this.src; refers to the image.
In what do I have to change the this?
Assuming you have only one img tag in your HTML:
$('myelement').click(function(){
var src = $('img').attr('src');
var newSrc = src.indexOf('_b.jpg') == -1 ? src.replace('.jpg','_b.jpg') : src.replace('_b.jpg','.jpg');
$('img').attr('src', newSrc);
});
But generally it's better to select with more specific selector, like id or some unique class attribute, as you might want more images in the document - then $('img') will select an array of all images.
In javascript this refers to current object, in other words contex. General practice is storing context into a variable so that when context changes, lets say by a dom event, you can still reach it.
// stores context into that variable
var that = this;
But apparently your question has nothing to do with this. If you need to change image attributes from another element, you need select the img tag and act on it.
$('.another-element').click(function(){
var newSrc = 'Here goes the new scr attribute';
$('img').attr('src',newScr);
});
You can use id or class for more precise selection.
I need some JavaScript to find the default link color of a page. How do I do it? I looked around but not sure how to do it. I believe jQuery has a .css function I can use but how about regular JavaScript?
Please note I don't have any specific element to target to grab css from, i.e. I can't look for the a color value for #myID -- I need to find the default a color value for the links on the page.
Thanks!
Try: Just place an <a> at the top of your page. This will get the values from the first <a> element.
Without any pseudo elements
window.getComputedStyle(document.body.getElementsByTagName('a')[0], null).getPropertyValue("color");
active
window.getComputedStyle(document.body.getElementsByTagName('a')[0], ':active').getPropertyValue("color");
hover
window.getComputedStyle(document.body.getElementsByTagName('a')[0], ':hover').getPropertyValue("color");
If you have any fears, just go with:
var el = document.createElement('a'); // Creates <a>
document.body.appendChild(el);
var COLOR = window.getComputedStyle(el).getPropertyValue("color");
document.body.removeChild(el);
You can create an element and add it to html, then get the CSS properties of the element that is assigned by default. Example:
var element = document.createElement('a');
document.documentElement.appendChild(element);
var color = getComputedStyle(element).color;
console.log(color) //rgb(0, 119, 204) stackoverflow default link color
Try this on StackOverflow page, opening the console.
Demo
I am trying to access href attribute of HTML <a> element but somehow that value gets changed automatically.
Following is my code :
function getTDElement(anchorString)
{
var td = document.createElement('td');
// i think this is not a good way to add child to html element but
// i have to do it for some unavoidable reason
td.innerHTML = anchorString;
var anchor = td.firstChild;
// following line prints url like
// http://localhost/myservlet?myParam=foobar
console.log(anchor.href);
return td;
}
// im passing only /myservlet?myParam=foobar in following line
getTDElement("<a href=/myservlet?myParam=foobar>display</a>");
I am not able to understand why and how href attribute of element changes automatically.
Can anyone please shed some light on this issue?
The href property on a link element is a special property, not a simple string. It is liable to change your href value to the absolute URL it thinks it resolves to. You can get the unchanged value using getAttribute.
console.log(anchor.getAttribute('href'));