Develop Reference

Problems with toggling more than one Image when clicking

I have my code set so that an image can change after clicking the image. I understand getElementById is meant to get results from one class name, but I don't know how to expand on that, and have the same result without changing the class name. I tried querySelector, but I think I am missing something. Any help would be appreciated. Here is my code:
<!--how do I make this apply to all images?-->
function changeImage() {
let displayImage = document.querySelector('#img-area, #star-picture, #colorful')
if (displayImage.src.match('Kabuto.jpg')) {
displayImage.src = 'PersonalCreations/LylatForce.jpg'
} else {
displayImage.src = 'Kabuto.jpg'
}
}
<!--image area or main img-->
<div class="row">
<div class="column">
<img id="img-area" src='Kabuto.jpg' class="responsive" alt="" onclick="changeImage()" height="200" with="200">
<button class="first" onclick="document.getElementById('img-area').src='PersonalCreations/LylatForce.jpg'">Change Image</button>
</div>
<div class="column">
<img id="star-picture" src="Kabuto.jpg" height="200" with="200" />
<button onclick="document.getElementById('star-
picture').src='PersonalCreations/Year6969.jpg'">Change Image</button>
</div>
<div class="column">
<img id="colorful" src="Kabuto.jpg" height="200" with="500" />
<button onclick="document.getElementById('colorful').src='PersonalCreations/BallInTheShoeProductions.jpg'">Change Image</button>
</div>
<div class="column">
<img id="holiday" src='Kabuto.jpg' alt="" onclick="changeImage()" height="200" with="200">
<button onclick="document.getElementById('holiday').src='PersonalCreations/ChristmasFestivalProject.jpg'">Change Image</button>
</div>
</div>
<p>Hello World</p>
<script src="imgchanger.js"></script>

First, CSS styling and JavaScript should not be used inline with HTML. You should separate out those things.
Your issue is that you have:
let displayImage = document.querySelector ('#img-area, #star-picture, #colorful')
But, .querySelector() will only return the first matching element. You need .querySelectorAll(), which will return a collection of all matching elements.
Or, you can avoid all of that and do this:
// Set up a single event handler for all clicks in the document
document.addEventListener("click", function(evt){
// But test to see if the click originated at a button
if(evt.target.nodeName === "BUTTON"){
// Get the button's parent div and then the source of the first img within that
let img = evt.target.closest("div").querySelector("img").src;
// Find out which button was clicked by looking at its class
switch (evt.target.className){
case "first":
// Change the source
img = "PersonalCreations/LylatForce.jpg";
break;
case "second":
img = "PersonalCreations/Year6969.jpg";
break;
case "third":
img = "PersonalCreations/BallInTheShoeProductions.jpg";
break;
case "fourth":
img = "PersonalCreations/ChristmasFestivalProject.jpg";
break;
}
console.clear();
console.log("Image source is now: " + img);
}
});;
.img200x200 { height:200px; width:200px; }
.img200x500 { height:200px; width:500px; }
<!-- See how much cleaner the HTML is now that the CSS and
JavaScript have been separated out? -->
<div class="row">
<div class="column">
<img src="Kabuto.jpg" class="responsive img200x200" alt="">
<button class="first">Change Image</button>
</div>
<div class="column">
<img src="Kabuto.jpg" class="responsive img200x200" alt="">
<button class="second">Change Image</button>
</div>
<div class="column">
<img src="Kabuto.jpg" class="responsive img200x500" alt="">
<button class="third">Change Image</button>
</div>
<div class="column">
<img src="Kabuto.jpg" class="responsive img200x200" alt="">
<button class="fourth">Change Image</button>
</div>
</div>
<p>Hello World</p>

jquery wont set image src from another image

I have started some blogs using Weebly now I want to do several changes to the blog UI, everything went well until I wanted to do this. I wanted to get the image path from the image inside blog-content and set it on the blog-post-image. In my head, this jquery looks logical, but somewhere error lays.
Few things to care about, I should use each because there are many of the blog posts and I cannot use ids because of the same reason, cannot use the same id multiple times.
HTML:
$('.blog-post-image').each(function() {
var $me = $(this);
var blogPostImage = $me.siblings('.blog-content').children('img').attr('src');
$me.attr('src', blogPostImage);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blog-post-746510653886732592" class="blog-post">
<div class="blog-header">
<div class="blog-post-container">
<h2 class="blog-title">
</h2>
<p class="blog-date">
<span class="date-text">
15/6/2021
</span>
</p>
<div>
<img class="blog-post-image" />
</div>
</div>
</div>
<div class="blog-content">
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
</a>
<div style="display:block;font-size:90%">
</div>
</div>
</div>

.blog-post-image doesn't have any siblings. Siblings are immediate children of the same parent element, but there are no other elements in the div containing <img class="blog-post-image" />.
You need to go up to the .blog-header to get its sibling.
Also, instead of using .each(), you can use a function in .attr(). It automatically loops, and assigns the return value to the attribute.
$('.blog-post-image').attr('src', function() {
return $(this).closest('.blog-header').siblings('.blog-content').find('img').attr('src');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blog-post-746510653886732592" class="blog-post">
<div class="blog-header">
<div class="blog-post-container">
<h2 class="blog-title">
</h2>
<p class="blog-date">
<span class="date-text">
15/6/2021
</span>
</p>
<div>
<img class="blog-post-image" />
</div>
</div>
</div>
<div class="blog-content">
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
</a>
<div style="display:block;font-size:90%">
</div>
</div>
</div>

Two things:
1.) .blog-content is not a sibling of .blog-post-image
2.) .children() only looks one level deep to find the element you are looking for.
What you need to do is traverse upwards to find a sibling of .blog-content and then use the .find() function to do a deep search of the given DOM node to find what you're looking for.
$('.blog-post-image').each(function() {
var me = $(this);
var blogPostImage = me.parent().parent().parent().siblings('.blog-content').find('img').attr('src');
me.attr('src', blogPostImage);
});
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="blog-post-746510653886732592" class="blog-post">
<div class="blog-header">
<div class="blog-post-container">
<h2 class="blog-title">
</h2>
<p class="blog-date">
<span class="date-text">15/6/2021</span>
</p>
<div>
<img class="blog-post-image" />
</div>
</div>
</div>
<div class="blog-content">
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
</a>
<div style="display:block;font-size:90%">
</div>
</div>
</div>
</div>
</div>
</body>

Getting element values in jquery

I spent lots of time trying to figure out getting a values from an element using jquery. Here's the code
<div class="school">
<div class="school-prev">
<img src="images/photos.png" class="img-responsive" alt="" />
</div>
<h5 class="school-title">Admin</h5>
<small class="text-muted">School Board</small>
</div>
<div class="school">
<div class="school-prev">
<img src="images/photos2.png" class="img-responsive" alt="" />
</div>
<h5 class="school-title">Finance</h5>
<small class="text-muted">School Board</small>
</div>
Jquery Coe
$(document).ready(function(){
$(".school").click('.school-title', function(e){
var showValue=$(this).text();
alert(showValue);
});
});
Example of return values: Admin School Board;
Expected value is should be "Admin or Finance"
NB: Any solution should consider outside div(school) clickable and not school-title div alone.
Warm regards.

Try the following jQuery code:
$(document).ready(function(){
// console.log('th');
$(document).on('click','.school .school-title', function(e){
e.preventDefault()
var th = $(this); //change over here
console.log(th.text());
});
});

You can change $(".school").click('.school-title', function(e){ to $(".school").on('click', '.school-title', function(e) { and it will solve the problem for you.
After updating your NB, you can use:
$(document).ready(function() {
$(".school").click(function(e) {
var showValue = $('.school-title',this).text()
alert(showValue);
});
});
Demo
$(document).ready(function() {
$(".school").click(function(e) {
var showValue = $('.school-title',this).text()
alert(showValue);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="school">
<div class="school-prev">
<img src="images/photos.png" class="img-responsive" alt="" />
</div>
<h5 class="school-title">Admin</h5>
<small class="text-muted">School Board</small>
</div>
<div class="school">
<div class="school-prev">
<img src="images/photos2.png" class="img-responsive" alt="" />
</div>
<h5 class="school-title">Finance</h5>
<small class="text-muted">School Board</small>
</div>

You want a click anywhere in the school div to get the title - not just on the title itself. To do that, you just need to check for the school-title child element in the click function on school.
This will get all children with the class school-title (of which there will only be one - it works the same as find except on direct children only) and get the text from it:
$(document).ready(function(){
$(".school").click('.school-title', function(e){
var showValue=$(this).children('.school-title').text();
alert(showValue);
});
});
/* Just for illustration to make it easier to see what is happening */
.school { border: 1px solid #ccc;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="school">
<div class="school-prev">
<img src="images/photos.png" class="img-responsive" alt="" />
</div>
<h5 class="school-title">Admin</h5>
<small class="text-muted">School Board</small>
</div>
<div class="school">
<div class="school-prev">
<img src="images/photos2.png" class="img-responsive" alt="" />
</div>
<h5 class="school-title">Finance</h5>
<small class="text-muted">School Board</small>
</div>
You only have one child with school-title in this case, but it will work with multiple titles if needed (e.g. if you did want to get "Admin School Board" for example, you could simply add the school-title class to the text-muted element).
Reference: jQuery children documentation

You are using 'school' class name for the click event and want to get the value child element of div. That is not possible in this way.
Simply Change the code "$(this).text();" to "$(classname,this).text();".
Happy coding.

How to copy the href link of an anchor to other anchor?

I am showing a set of products via shortcode in WordPress. The display has an image and button.
Problem: Only the photo contains the link to single product page. The associated button does not have the link to the single product page.
This is the current code:
<div class="display-products">
<div class="wpb_wrapper">
<div class="displayProduct-shortcode displayProduct-Container">
<div class="product_grid dp-section dp-group woocommerce" id="displayProduct">
<div class="dp_product_item dp-col dp-col_1_of_6 firstcol">
<div class="dp_images">
<a class="dp-product-image" title="Custom Made Wedding Cabinet" href="yahoo.com">
<div class="he-wrap tpl1">
<div class="dp-img-wrapper"> <img width="192" height="264" alt="#" class="attachment-display_product_thumbnail size-display_product_thumbnail wp-post-image" src="img_src"> </div>
</div> <span data-id="696" class="dpquickview dp_quickview_button"><img src="img_src"></span> </a>
</div>
<div class="dp-product-information clearfix">
<h2 class="product-name">
<a title="Custom Made Wedding Cabinet" href="#">Custom Made Wedding Cabinet</a>
</h2>
<div class="dp-stock"></div>
<div class="dp-grid-button"> <a class="single_add_to_cart_button button alt db_customButton" href="#">READ MORE</a> </div>
<div style="clear: both;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Desired Output: I want to somehow iterate over each .single_add_to_cart_button and copy the link of every product-name to each READ MORE button
This is my current jquery code:
j('.display-products .displayProduct-shortcode .dp-product-information .dp-grid-button .single_add_to_cart_button').each(function() {
var getProductLink = j('.display-products .displayProduct-shortcode .dp-product-information .product-name > a').attr('href');
j(this).attr('href', getProductLink);
});

Set the href attribute value using the elements context. Use closest() to traverse up to dp-product-information element then find the desired anchor element the read its attribute and set the value.
Use
j('.display-products .displayProduct-shortcode .dp-product-information .dp-grid-button .single_add_to_cart_button').attr('href', function(){
return j(this).closest('.dp-product-information').find('.product-name>a').attr('href');
});
$(function() {
$('.dp-product-information .dp-grid-button .single_add_to_cart_button').attr('href', function() {
return $(this).closest('.dp-product-information').find('.product-name > a').attr('href');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dp-product-information clearfix">
<h2 class="product-name">
<a title="Custom Made Wedding Cabinet" href="#Test">Custom Made Wedding Cabinet</a>
</h2>
<div class="dp-stock"></div>
<div class="dp-grid-button">
<a class="single_add_to_cart_button button alt db_customButton" href="#">READ MORE</a>
</div>
<div style="clear: both;"></div>
</div>

Instead of assigning value for the different buttons with the links I would like to suggest you to use a common class (if you can) then trigger the click event for them:
$('.selector').on('click',function(){
$('.a-selector').trigger('click');
});

Javascript css underline corresponding to toggled divs

Hey all,
Earlier I received some help toggling between three hidden divs in a photo library. I'd like to add an underline to the anchors toggling which div to show. The script is dynamic... and therein lies my problem. I'm not sure how to tell which anchor to underline within the code. Suffice it to say that it's beyond my grasp!
I'd also like for the first of the three anchors, Promo, to load underlined.
Thanks for your help!
HTML:
<div class="text" id="content">
<h2>PHOTOS</h2>
<hr />
<p align="left"><a class="showlink" id="show_promo">PROMO</a> <a class="showlink" id="show_studio">STUDIO</a> <a class="showlink" id="show_live">LIVE</a></p>
<div class="section" id="promo">
<p align="center">PROMO</p>
<p align="center">
<img src="#">
</p>
</div>
<div class="section" id="studio">
<p align="center">STUDIO</p>
<p align="center">
<img src="#">
</p>
</div>
<div class="section" id="live">
<p align="center">LIVE</p>
<p align="center">
<img src="#">
</p>
</div>
</div>
Javascript:
$('a.showlink').click(function(){
var toShow = this.id.substr(5);
$('div.section:visible').fadeOut(600, function(){
$('#' + toShow).fadeIn(600);
});
});

Try this:
$(function(){
$('a.showlink').css("text-decoration", "none");
$("#show_promo").css("text-decoration", "underline").click();
});
$('a.showlink').click(function(){
$('a.showlink').css("text-decoration", "none");
$(this).css("text-decoration", "underline");
var toShow = this.id.substr(5);
$('div.section:visible').fadeOut(600, function(){
$('#' + toShow).fadeIn(600);
});
});