Can I change an attribute value in one element using another onclick?-CodePudding

I have a webpage with multiple thumbnails all positioned side-by-side. When an image is clicked, a modal window pops up displaying a larger version of the image and a close button. I want the window to change its image src when one of the image "buttons" is clicked. So i have attempted to put an attribute called "imgsrc" inside the span elements which are all under the div whose

HTML

\\\button that looks like a thumbnail of "image 04"\\\
<button button="click"
        
        data-toggle="modal"
        data-target="#exampleModal"
        imgsrc="http://example.com/wp-content/uploads/04.png">
        <img src= "http://example.com/wp-content/uploads/04.png">
    </button>

\\\Image of modal set to "image 22" as default\\\
 <div >
        <img  
             src="http://example.com/wp-content/uploads/22.png"
             alt="Click on button" />

Non-working jQuery

\\\On Click change the modal image src attribute to the value at imgsrc of the thumbnail element clicked\\\
$('.graveyard-dump span').ready(function click(f) {
       $('.graveyard-dump span').click(function click(f) {
            $('.modal-image').attr('src', $(this).attr("imgsrc"));
    });
});

I got the idea to reuse code from another program I have which changes a series of css elements and text on click. Here is some code that works which i stole the idea from: HTML

///Red button with many attribute values for the jQuery to read and place///
 <span    
                    picChange="url(http://example.com/wp-content/uploads/Resin-Red.png)" 
                    name="Red" 
                    color="#ff0000" 
                    background1="#ff2400"  
                    background2="#ba110c"  
                    background3="#90021F"  
                    background4="none"
                    name1="Scarlet"
                    name2="Crimson"
                    name3="Burgundy"
                    name4="-"
                    ></span>

jQuery

///Reads a click, adds the class "active" and removes it from other buttons, changes many attributes around the page. None of these are attribute-attribute changes though./// 
$('.changecolor span').ready(function click(f) {
        $('.changecolor span').click(function click(f) {
            $('.changecolor span').removeClass("active");
            $(this).addClass("active");
            $('.pic').css('background-image', $(this).attr("picChange"));
            $('.name').text($(this).attr("name"));
            $('.name').css('color', $(this).attr("color"));
            $('.colorbar-1').css('background', $(this).attr('background1'));
            $('.colorbar-2').css('background', $(this).attr('background2'));
            $('.colorbar-3').css('background', $(this).attr('background3'));
            $('.colorbar-4').css('background', $(this).attr('background4'));
            $('.colorbar-1').text($(this).attr("name1"));
            $('.colorbar-2').text($(this).attr("name2"));
            $('.colorbar-3').text($(this).attr("name3"));
            $('.colorbar-4').text($(this).attr("name4"));

CodePudding user response：

You could achieve the image source change like this

<img id="display" src=""/>

<button onclick="$('display').src='https://imageLink.com'">Click me</button>

CodePudding user response：

The fix was to use

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#modal-image").attr("src", $(this).attr("imgsrc"));
  });
});
</script>

I set '.modal-image' src attribute to the attribute "imgsrc" of the button clicked. I also had to remove the starter image located in .modal-image src or it would try to load that image on the first click.