How do I add a value to a click












2















I'd like to add an attribute/value to each click of similar elements to use that value somewhere else. The code I'd like to use it is something like



<div class="productbox"><img src="image.png"></div>
<div class="productbox"><img src="image2.png"></div>
<div class="productbox"><img src="image3.png"></div>

<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>

$(".productbox").click(function() {
var imgname = $(this).next(img).value;
$(".differentcontainer").html(imgname);
});


So I'd want to get the value of the comoplete img-tag and use it after a click on a different element. As I already use jquery this would possibly make most sense sticking to it .



Thanks!










share|improve this question























  • $(this).next('img').attr('src')

    – Roy
    Apr 13 '18 at 8:59
















2















I'd like to add an attribute/value to each click of similar elements to use that value somewhere else. The code I'd like to use it is something like



<div class="productbox"><img src="image.png"></div>
<div class="productbox"><img src="image2.png"></div>
<div class="productbox"><img src="image3.png"></div>

<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>

$(".productbox").click(function() {
var imgname = $(this).next(img).value;
$(".differentcontainer").html(imgname);
});


So I'd want to get the value of the comoplete img-tag and use it after a click on a different element. As I already use jquery this would possibly make most sense sticking to it .



Thanks!










share|improve this question























  • $(this).next('img').attr('src')

    – Roy
    Apr 13 '18 at 8:59














2












2








2


1






I'd like to add an attribute/value to each click of similar elements to use that value somewhere else. The code I'd like to use it is something like



<div class="productbox"><img src="image.png"></div>
<div class="productbox"><img src="image2.png"></div>
<div class="productbox"><img src="image3.png"></div>

<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>

$(".productbox").click(function() {
var imgname = $(this).next(img).value;
$(".differentcontainer").html(imgname);
});


So I'd want to get the value of the comoplete img-tag and use it after a click on a different element. As I already use jquery this would possibly make most sense sticking to it .



Thanks!










share|improve this question














I'd like to add an attribute/value to each click of similar elements to use that value somewhere else. The code I'd like to use it is something like



<div class="productbox"><img src="image.png"></div>
<div class="productbox"><img src="image2.png"></div>
<div class="productbox"><img src="image3.png"></div>

<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>

$(".productbox").click(function() {
var imgname = $(this).next(img).value;
$(".differentcontainer").html(imgname);
});


So I'd want to get the value of the comoplete img-tag and use it after a click on a different element. As I already use jquery this would possibly make most sense sticking to it .



Thanks!







javascript jquery






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Apr 13 '18 at 8:54









DaiaiaiDaiaiai

470417




470417













  • $(this).next('img').attr('src')

    – Roy
    Apr 13 '18 at 8:59



















  • $(this).next('img').attr('src')

    – Roy
    Apr 13 '18 at 8:59

















$(this).next('img').attr('src')

– Roy
Apr 13 '18 at 8:59





$(this).next('img').attr('src')

– Roy
Apr 13 '18 at 8:59












2 Answers
2






active

oldest

votes


















2














From jQuery Syntax




The jQuery syntax is tailor-made for selecting HTML elements and
performing some action on the element(s). Basic syntax is:




$(selector).action();




A $ sign to define/access jQuery.



A (selector) to "query (or find)" HTML elements.



A jQuery action() to be performed on the element(s)







$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").html(imgname);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img style="width:50px; height:50px" src="https://i2.wp.com/mightywidow.com/wp-content/uploads/2016/12/11519100485_ddfd5be329_z.jpg?fit=640%2C361&amp;ssl=1" title="1"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnXSQpzvR2frx8nzq-rxxQZsOjPtRWNVVRwoU7-NsUAtGYUOom" title="2"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://s-media-cache-ak0.pinimg.com/736x/e6/63/d0/e663d0bf3d57da87ef9992cddd5af05c--kindness-ideas-acts-of-kindness.jpg" title="3"></div>

<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>








share|improve this answer


























  • Thanks! So var imgname = $(this).html(); does use all the content of the clicked parent-element but not the parent element itself? SO in terms of a more complicated markup-structure I'd need to specify the "this" better?

    – Daiaiai
    Apr 13 '18 at 9:04











  • $(this) says that the click which is performed on .productbox. So all the content inside the clicked element will be taken

    – Sinto
    Apr 13 '18 at 9:06





















0














Juts get the html in the div, something like this:






$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").empty();
$(".differentcontainer").html(imgname);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img src="http://via.placeholder.com/350x150"></div>
<div class="productbox"><img src="http://via.placeholder.com/140x100"></div>
<div class="productbox"><img src="http://via.placeholder.com/200x100"></div>

<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>








share|improve this answer
























  • No need for $(".differentcontainer").empty();

    – Carsten Løvbo Andersen
    Apr 13 '18 at 9:06











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f49812973%2fhow-do-i-add-a-value-to-a-click%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























2 Answers
2






active

oldest

votes








2 Answers
2






active

oldest

votes









active

oldest

votes






active

oldest

votes









2














From jQuery Syntax




The jQuery syntax is tailor-made for selecting HTML elements and
performing some action on the element(s). Basic syntax is:




$(selector).action();




A $ sign to define/access jQuery.



A (selector) to "query (or find)" HTML elements.



A jQuery action() to be performed on the element(s)







$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").html(imgname);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img style="width:50px; height:50px" src="https://i2.wp.com/mightywidow.com/wp-content/uploads/2016/12/11519100485_ddfd5be329_z.jpg?fit=640%2C361&amp;ssl=1" title="1"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnXSQpzvR2frx8nzq-rxxQZsOjPtRWNVVRwoU7-NsUAtGYUOom" title="2"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://s-media-cache-ak0.pinimg.com/736x/e6/63/d0/e663d0bf3d57da87ef9992cddd5af05c--kindness-ideas-acts-of-kindness.jpg" title="3"></div>

<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>








share|improve this answer


























  • Thanks! So var imgname = $(this).html(); does use all the content of the clicked parent-element but not the parent element itself? SO in terms of a more complicated markup-structure I'd need to specify the "this" better?

    – Daiaiai
    Apr 13 '18 at 9:04











  • $(this) says that the click which is performed on .productbox. So all the content inside the clicked element will be taken

    – Sinto
    Apr 13 '18 at 9:06


















2














From jQuery Syntax




The jQuery syntax is tailor-made for selecting HTML elements and
performing some action on the element(s). Basic syntax is:




$(selector).action();




A $ sign to define/access jQuery.



A (selector) to "query (or find)" HTML elements.



A jQuery action() to be performed on the element(s)







$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").html(imgname);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img style="width:50px; height:50px" src="https://i2.wp.com/mightywidow.com/wp-content/uploads/2016/12/11519100485_ddfd5be329_z.jpg?fit=640%2C361&amp;ssl=1" title="1"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnXSQpzvR2frx8nzq-rxxQZsOjPtRWNVVRwoU7-NsUAtGYUOom" title="2"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://s-media-cache-ak0.pinimg.com/736x/e6/63/d0/e663d0bf3d57da87ef9992cddd5af05c--kindness-ideas-acts-of-kindness.jpg" title="3"></div>

<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>








share|improve this answer


























  • Thanks! So var imgname = $(this).html(); does use all the content of the clicked parent-element but not the parent element itself? SO in terms of a more complicated markup-structure I'd need to specify the "this" better?

    – Daiaiai
    Apr 13 '18 at 9:04











  • $(this) says that the click which is performed on .productbox. So all the content inside the clicked element will be taken

    – Sinto
    Apr 13 '18 at 9:06
















2












2








2







From jQuery Syntax




The jQuery syntax is tailor-made for selecting HTML elements and
performing some action on the element(s). Basic syntax is:




$(selector).action();




A $ sign to define/access jQuery.



A (selector) to "query (or find)" HTML elements.



A jQuery action() to be performed on the element(s)







$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").html(imgname);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img style="width:50px; height:50px" src="https://i2.wp.com/mightywidow.com/wp-content/uploads/2016/12/11519100485_ddfd5be329_z.jpg?fit=640%2C361&amp;ssl=1" title="1"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnXSQpzvR2frx8nzq-rxxQZsOjPtRWNVVRwoU7-NsUAtGYUOom" title="2"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://s-media-cache-ak0.pinimg.com/736x/e6/63/d0/e663d0bf3d57da87ef9992cddd5af05c--kindness-ideas-acts-of-kindness.jpg" title="3"></div>

<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>








share|improve this answer















From jQuery Syntax




The jQuery syntax is tailor-made for selecting HTML elements and
performing some action on the element(s). Basic syntax is:




$(selector).action();




A $ sign to define/access jQuery.



A (selector) to "query (or find)" HTML elements.



A jQuery action() to be performed on the element(s)







$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").html(imgname);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img style="width:50px; height:50px" src="https://i2.wp.com/mightywidow.com/wp-content/uploads/2016/12/11519100485_ddfd5be329_z.jpg?fit=640%2C361&amp;ssl=1" title="1"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnXSQpzvR2frx8nzq-rxxQZsOjPtRWNVVRwoU7-NsUAtGYUOom" title="2"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://s-media-cache-ak0.pinimg.com/736x/e6/63/d0/e663d0bf3d57da87ef9992cddd5af05c--kindness-ideas-acts-of-kindness.jpg" title="3"></div>

<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>








$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").html(imgname);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img style="width:50px; height:50px" src="https://i2.wp.com/mightywidow.com/wp-content/uploads/2016/12/11519100485_ddfd5be329_z.jpg?fit=640%2C361&amp;ssl=1" title="1"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnXSQpzvR2frx8nzq-rxxQZsOjPtRWNVVRwoU7-NsUAtGYUOom" title="2"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://s-media-cache-ak0.pinimg.com/736x/e6/63/d0/e663d0bf3d57da87ef9992cddd5af05c--kindness-ideas-acts-of-kindness.jpg" title="3"></div>

<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>





$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").html(imgname);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img style="width:50px; height:50px" src="https://i2.wp.com/mightywidow.com/wp-content/uploads/2016/12/11519100485_ddfd5be329_z.jpg?fit=640%2C361&amp;ssl=1" title="1"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnXSQpzvR2frx8nzq-rxxQZsOjPtRWNVVRwoU7-NsUAtGYUOom" title="2"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://s-media-cache-ak0.pinimg.com/736x/e6/63/d0/e663d0bf3d57da87ef9992cddd5af05c--kindness-ideas-acts-of-kindness.jpg" title="3"></div>

<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>






share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 25 '18 at 11:11









Yvette Colomb

20.3k1470112




20.3k1470112










answered Apr 13 '18 at 9:02









SintoSinto

3,26792340




3,26792340













  • Thanks! So var imgname = $(this).html(); does use all the content of the clicked parent-element but not the parent element itself? SO in terms of a more complicated markup-structure I'd need to specify the "this" better?

    – Daiaiai
    Apr 13 '18 at 9:04











  • $(this) says that the click which is performed on .productbox. So all the content inside the clicked element will be taken

    – Sinto
    Apr 13 '18 at 9:06





















  • Thanks! So var imgname = $(this).html(); does use all the content of the clicked parent-element but not the parent element itself? SO in terms of a more complicated markup-structure I'd need to specify the "this" better?

    – Daiaiai
    Apr 13 '18 at 9:04











  • $(this) says that the click which is performed on .productbox. So all the content inside the clicked element will be taken

    – Sinto
    Apr 13 '18 at 9:06



















Thanks! So var imgname = $(this).html(); does use all the content of the clicked parent-element but not the parent element itself? SO in terms of a more complicated markup-structure I'd need to specify the "this" better?

– Daiaiai
Apr 13 '18 at 9:04





Thanks! So var imgname = $(this).html(); does use all the content of the clicked parent-element but not the parent element itself? SO in terms of a more complicated markup-structure I'd need to specify the "this" better?

– Daiaiai
Apr 13 '18 at 9:04













$(this) says that the click which is performed on .productbox. So all the content inside the clicked element will be taken

– Sinto
Apr 13 '18 at 9:06







$(this) says that the click which is performed on .productbox. So all the content inside the clicked element will be taken

– Sinto
Apr 13 '18 at 9:06















0














Juts get the html in the div, something like this:






$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").empty();
$(".differentcontainer").html(imgname);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img src="http://via.placeholder.com/350x150"></div>
<div class="productbox"><img src="http://via.placeholder.com/140x100"></div>
<div class="productbox"><img src="http://via.placeholder.com/200x100"></div>

<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>








share|improve this answer
























  • No need for $(".differentcontainer").empty();

    – Carsten Løvbo Andersen
    Apr 13 '18 at 9:06
















0














Juts get the html in the div, something like this:






$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").empty();
$(".differentcontainer").html(imgname);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img src="http://via.placeholder.com/350x150"></div>
<div class="productbox"><img src="http://via.placeholder.com/140x100"></div>
<div class="productbox"><img src="http://via.placeholder.com/200x100"></div>

<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>








share|improve this answer
























  • No need for $(".differentcontainer").empty();

    – Carsten Løvbo Andersen
    Apr 13 '18 at 9:06














0












0








0







Juts get the html in the div, something like this:






$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").empty();
$(".differentcontainer").html(imgname);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img src="http://via.placeholder.com/350x150"></div>
<div class="productbox"><img src="http://via.placeholder.com/140x100"></div>
<div class="productbox"><img src="http://via.placeholder.com/200x100"></div>

<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>








share|improve this answer













Juts get the html in the div, something like this:






$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").empty();
$(".differentcontainer").html(imgname);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img src="http://via.placeholder.com/350x150"></div>
<div class="productbox"><img src="http://via.placeholder.com/140x100"></div>
<div class="productbox"><img src="http://via.placeholder.com/200x100"></div>

<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>








$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").empty();
$(".differentcontainer").html(imgname);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img src="http://via.placeholder.com/350x150"></div>
<div class="productbox"><img src="http://via.placeholder.com/140x100"></div>
<div class="productbox"><img src="http://via.placeholder.com/200x100"></div>

<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>





$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").empty();
$(".differentcontainer").html(imgname);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img src="http://via.placeholder.com/350x150"></div>
<div class="productbox"><img src="http://via.placeholder.com/140x100"></div>
<div class="productbox"><img src="http://via.placeholder.com/200x100"></div>

<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>






share|improve this answer












share|improve this answer



share|improve this answer










answered Apr 13 '18 at 9:00









Sachi TekinaSachi Tekina

1,19731538




1,19731538













  • No need for $(".differentcontainer").empty();

    – Carsten Løvbo Andersen
    Apr 13 '18 at 9:06



















  • No need for $(".differentcontainer").empty();

    – Carsten Løvbo Andersen
    Apr 13 '18 at 9:06

















No need for $(".differentcontainer").empty();

– Carsten Løvbo Andersen
Apr 13 '18 at 9:06





No need for $(".differentcontainer").empty();

– Carsten Løvbo Andersen
Apr 13 '18 at 9:06


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f49812973%2fhow-do-i-add-a-value-to-a-click%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

To store a contact into the json file from server.js file using a class in NodeJS

Redirect URL with Chrome Remote Debugging Android Devices

Dieringhausen