I want to focus on image link by javascript, the problem is that I don't have direct access to my image.
<li classe="product-1">
<div classe="shop">
<a class="img-link" src="xxxxxx">
<img class="image1">
</a>
</div>
</li>
i tried using access to give focus to the image but doesn't work
var imaglink = document.getElementsByClassName("product-1")[0].getElementsByClassName("shop")[0].getElementsByClassName("img-link")[0];
imagelink.focus();
if anyone have any suggestion ho to resolve this probleme i will be thankful
Possible typo, depending on language I think... I notice in your code you have some lines with classe="..." other times class="..."
with your li element have classe, that might be returning an undefined value, so the rest of your selection isn't going to work.
const img = document.querySelector("li a > img")
img.focus()
or
const img = document.querySelector(".shop > a img")
or if there multiple images
const img = document.querySelectorAll(".product-1 img")[0]
You can just combine the selectors together and use querySelector like
document.querySelector(".product-1 .shop .img-link").focus();
document.querySelector(".product-1 .shop .img-link").focus();
a:focus{
display:inline-block;
border:20px solid #ccc;
}
<li class="product-1">
<div class="shop">
<a href class="img-link">
<img class="image1" src="https://picsum.photos/200/300">
</a>
</div>
</li>
Related
I have this function
function changeImage() {
console.log(event.target.getAttribute('data-image-path'));
document.getElementById('image-id').src = event.target.getAttribute('data-image-path');
}
on click I want to pass the data-image-path into the changeImage function, the data-image-path is inside the li so is the onclick:
<li data-image-path="./assets/img/my_imgs/features/sc2.png" onclick='changeImage(this.data-image-path)'>
<div class="inside-li">
<img src="./assets/img/my_imgs/features/feat1.png" alt="image">
<p>Easy Scheduling & Attendance Tracking</p>
</div>
<div class="plan-hr">
<hr class="hr-1">
<hr class="hr-2">
</div>
</li>
image:
I have multiple li elements and each contains a different src image inside its data-image-path but how can I pass the data?
This is the img element that should recieve the src:
<div class="image-loader col-md-6 col-sm-12">
<div class="banner-thumb-wrap">
<div class="banner-thumb">
<img class="header-inner-img" id="image-id">
</div>
</div>
</div>
Here is the result in my console.log and code:
Try this, pass this to changeImage function and get the attribute of the clicked element.
function changeImage(obj) {
var imagePath2 = obj.getAttribute('data-image-path');
document.getElementById('image-id').src = imagePath2;
}
<li data-image-path="./assets/img/my_imgs/features/sc2.png" onclick='changeImage(this)'> </li>
You can change your HTML into this:
<li data-image-path="./assets/img/my_imgs/features/sc2.png" onclick='changeImage(event.target.dataset.imagePath)'> </li>
But there is a better version:
Select the li elements with querySelectorAll and addEventListener for them afterward.
Use event.target.getAttribute('data-image-path') to get the clicked li's data-image-path value inside changeImage() method.
function changeImage() {
console.log(event.target.getAttribute('data-image-path'));
document.getElementById('image-id').src = event.target.getAttribute('data-image-path');
}
<img class="header-inner-img" id="image-id">
<li data-image-path="./assets/img/my_imgs/features/sc2.png" onclick='changeImage()'> </li>
I slightly changed your html code, and significantly changed the js code using the forEach method, with a click listener inside. This means that calling the onclick=changeImage (this.data-image-path) event is no longer needed! I also left the console so that you can see which attribute is being loaded on click at the moment.
I hope that is exactly what you needed.
var li_attr = document.querySelectorAll('li');
var img = document.getElementById('image-id');
Array.from(li_attr).forEach(function(li_attrArray, i) {
li_attrArray.addEventListener('click', function() {
imagePath2 = li_attrArray.getAttribute('data-image-path');
img.src = imagePath2;
console.log(img.src);
});
});
<li data-image-path="./assets/img/my_imgs/features/sc1.png">1</li>
<li data-image-path="./assets/img/my_imgs/features/sc2.png">2</li>
<li data-image-path="./assets/img/my_imgs/features/sc3.png">3</li>
<li data-image-path="./assets/img/my_imgs/features/sc4.png">4</li>
<img class="header-inner-img" id="image-id">
You can pass the event and then access the data through the event.target.getAttribute()
function changeImage(e) {
const dataImagePath = e.target.getAttribute('data-image-path');
document.getElementById('image-id').src = dataImagePath;
console.log(dataImagePath);
console.log(document.getElementById('image-id').src);
}
<li data-image-path="./assets/img/my_imgs/features/sc2.png" onclick='changeImage(event)'> </li>
<img class="header-inner-img" id="image-id">
<ol>
<li id="ItsMyKitchen">It's My Kitchen</li>
<div id="mykitchen" hidden>
<img src="images/image1.jpg" height="200px" width="200px"/>
<ul>
<li>Pizza</li>
<li>Camorised Oinon rice</li>
<li>Jollof</li>
<li>Banku with Okor</li>
<li>Fufu</li>
<li>Spanish Omellet</li>
<li>Fried Rice with Beef</li>
<li>Steamed Rice with Curry Chicken</li>
<li>Yong Chow Fried Rice </li>
</ul>
</div>
i want to remove the "hidden" attribute from the div element that has "mykitchen" as the id. Am using this javascript code
var ItsMyKitchen1 = document.getElementById("ItsMyKitchen");
ItsMyKitchen1.onclick = function(){
document.getElementById("myKitchen").removeAttribute("hidden");
}
but it seems not to be working. any help
You've created your div with id mykitchen, but when you try to get the element by id, you're trying to select a div with id myKitchen. Try making those two match, and then your code should work as expected.
Your use of element.removeAttribute is correct, but capitalization matters for element ids!
You can try this way.
document.getElementById("mykitchen").addEventListener("load", myFunction);
function myFunction() {
document.getElementById("mykitchen").removeAttribute("hidden");
}
<div class="logo">
<a href="somelink.com">
<img src="someimage.png">
</a>
</div>
I want to change the src,how can I chage this src by using documents.getElementsByClassName.
You can not use getElementsByClassName because you don't have any classes associated with it.
You could however use a querySelector and get the class of the div and find the child that way. So with this html:
<div class="logo">
<a href="somelink.com">
<img src="someimage.png">
</a>
</div>
We can then use:
let img = document.querySelector('.logo img')
img.src = '/path/to/new/image.png'
.logo this is the class to find
img this is the child element of .logo
It doesn't have to be a direct child since there was no >
Once we have gotten that image we then set the new src to something else and the browser will automatically load the new image (assuming it exists).
try this
document.getElementsByClassName('img_ad')[0].src ='your source'
and add 'img_ad' class in the img element
<div class="logo">
<a href="somelink.com">
<img class="img_ad" src="someimage.png">
</a>
</div>
You can give the img tag an id and use:
document.getElementById("someid").src= "path/to/src";
or:
document.querySelector("#someid").src = "path/to/src";
Add an ID to the <img> (Example: id="myImage") and in JavaScript use the following:
document.getElementById("myImage").src = "newImage.png";
I'm trying to link one div with the href attribute of his first <a> href.
My html looks like this
<div class="clicked">
<a class="i-want-this-href" href="target">
<img>
</a>
<a class="this-one-is-useless" href="Wrong-target">
<img>
</a>
</div>
And I have tested some different ways like this:
$('.clicked').on('click',function(){
aux= $('this:first-child').attr("href");
console.log(aux);
});
But I always get Undefined on the console. And I want to get "target" inside the first <a> element.
Any help will be appreciated!
Your selector is incorrect, you can use .find()/.children() along with :first selector
aux= $(this).find('a:first').attr("href");
Use this context along with :first-child selector
$('.clicked').on('click', function() {
var href = $(this).find('a:first-child').attr("href");
console.log(href);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="clicked">
<a class="i-want-this-href" href="target">
<img>
</a>
<a class="this-one-is-useless" href="Wrong-target">
<img>
</a>
1) Do not use this in selectors, this needs to be passed to $ separately
2) Make sure to declare variable as local, otherwise there will be bugs.
3) Use first-of-type
$('.clicked').on('click',function(){
var aux = $(this).find('a:first-of-type').attr("href");
console.log(aux);
});
$('.clicked').on('click',function(){
aux= $(this).find('a:first-child').attr("href");
console.log(aux);
});
Wrong selector, If you want to use this in selector you should pass it separared as follows :
var aux = $('a', this).prop("href");
//Or
var aux = $(this).find('a').prop("href");
NOTE : jQuery by default will select the first occurrence.
Hope this helps.
$('.clicked').on('click',function(){
var aux = $('a', this).prop("href");
console.log(aux);
});
.clicked{
width:100%;
height:100px;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clicked">
<a class="i-want-this-href" href="target">
Image 1
</a>
<a class="this-one-is-useless" href="Wrong-target">
Image 2
</a>
</div>
If I mouseover on a link it has to show div.
My problem is that I have to show divs in all of the links inside a page. For each link I have to show a different div.
How to do this using javascript?
Since, your question does not specify anything. I will give a simplest solution I can. That is, with plain CSS, no JS needed.
Here is a demo
Markup
<a href="#">
Some
<div class="toshow">
Hello
</div>
</a>
<a href="#">
None
<div class="toshow">
Hi
</div>
</a>
CSS
.toshow {
display:none;
position: absolute;
background: #f00;
width: 200px;
}
a:hover div.toshow {
display:block;
}
You should not try to rely on script as much as possible. This is a very simple example, with displays the use of :hover event of the link.
Steps can be:
Make multiple divs all with different id.
Give style="display:none;" to all div.
Make links to show respective div.
In onMouseOver of link call js function which changes display property to block of proper div. Ex.:- document.getElementById("divId").style.display = "block"; And for all other div set display:none; in that js function.
Sample code:-
Your links:
Div 1
Div 1
Your divs:
<div id="myDiv1">Div 1</div>
<div id="myDiv2">Div 2</div>
JS function:
function Changing(i) {
if(i==1){
document.getElementById("myDiv1").style.display = "block";
document.getElementById("myDiv2").style.display = "none";
} else {
document.getElementById("myDiv1").style.display = "none";
document.getElementById("myDiv2").style.display = "block";
}
}
If you have more divs then you can use for loop in js function instead of if...else.
look at jquery each
<div id=div-0" class="sidediv" style="display:none" > Div for first link </div>
<div id=div-1" class="sidediv" style="display:none"> Div for second link </div>
<div id=div-2" class="sidediv" style="display:none"> Div for third link </div>
<a class="linkclass" href=""> Link </a>
<a class="linkclass" href=""> Link </a>
<a class="linkclass" href=""> Link </a>
and essentially do something like this
$('.linkclass').each(function(i,u) {
$(this).hover(function()
{
$('#div-'+i).show();
}, function() {
$('#div-'+i).hide(); //on mouseout;
})
});
Edit: oops ...this will need jquery. dont know why I assumed jquery here.
You can give ids to all the links such as
<a id="link-1"></a>
<a id="link-2"></a>
<a id="link-3"></a>
and so on ..
and similarly to div elements
<div id="div-1"></div>
<div id="div-2"></div>
<div id="div-3"></div>
and so on ..
then
$("a").hover(function () { //callback function to show on mouseover
var id = $(this).attr('id').replace("link-", "");
$("#div-"+id).show();
},
function () { //if you want to hide on mouse out
var id = $(this).attr('id').replace("link-", "");
$("#div-"+id).hide();
}
);