CODEWITHSUNDEEP
javascripthtml
Genome314
Genome314

Reputation: 505

Change both image and text values onclick

So, I have 3 variables as seen below, assume they are assigned values. What I want to do is to insert those variables into img class "myimg2", p class "myname2" and p class "myprof2" when the user clicks the div class="info2".

It has to be in that div because I want the user to click anywhere on that div to change all 3 values.

Is this possible in Javascript?

Javscript:

var storeOnClick, 
    name,
    prof;

HTML

<table class="table2" rules="rows">
<tr>
<td>
<div class="info2" onclick="changeStats(this)" >
<div  style="float:left">
<img class="myimg2"style="max-height:80px;" src="Pictures/QuestionMark.png">
</div>
<div style="float:left;">
<p class="myname2">Name: Jane Doe</p>
<p class="myprof2">Profession: Something</p>
</div>
</div>
</td>
<td>
<div class="info2" onclick="changeStats(this)" >
<div  style="float:left">
<img class="myimg2"style="max-height:80px;" src="Pictures/QuestionMark.png">
</div>
<div style="float:left;">
<p class="myname2">Name: Jane Doe</p>
<p class="myprof2">Profession: Something</p>
</div>
</div>
</td>
</tr>
</table>

Upvotes: 1

Views: 1280

Answers (2)

John C
John C

Reputation: 666

Ok, I think I've got the code. The way I'm doing it is attaching an event handler to the body of the page. Then in that function, I detect if you clicked on a .info element (or one of it's children). If you did, then I change out the values of that particular .info div

Super important parts:

// add an event listener to the entire body. I could have iterated through each div with the '.info2' class instead
if (document.body.addEventListener) {
    document.body.addEventListener('click', updateCard, false);
} else {
    document.body.attachEvent('onclick',updateCard); // stupid IE
}


// this is the callback function for the click event handler
function updateCard(e) {
   e = e || window.event;
   var target = e.target || e.srcElement; // more IE stuff

   // does target have an ancestor of .info2 ?
    var el = findAncestor(target, 'info2');
    if (el) {

      // which elements do we want to update? Only the currently clicked on .info2
      var iImg = el.querySelector('.myimg2');
      var iName = el.querySelector('.myname2');
      var iProf = el.querySelector('.myprof2');


      // assign the values a random element from the arrays
      storeOnClick = imgArray[Math.floor(Math.random()*imgArray.length)];
      name = nameArray[Math.floor(Math.random()*nameArray.length)];
      prof = profArray[Math.floor(Math.random()*profArray.length)];


      iImg.src = storeOnClick;
      iName.innerHTML = lblName + name;
      iProf.innerHTML = lblProf + prof;  
   }     
}

// this is similar to jQuery's $.parents('.class')
function findAncestor (el, cls) {
    while ((el = el.parentElement) && !el.classList.contains(cls));
    return el;
}

demo

For fun, here's what it might look like in jQuery:

$(function() {
   $('.info2').on("click",function() {
       var t = $(this);
       t.find('.myimg2').attr('src',storeOnClick);
       t.find('.myname2').html(name);
       t.find('.prof2').html(prof);
   });
});

Upvotes: 1

imbondbaby
imbondbaby

Reputation: 6411

Try this:

Insert the new onClick in info2:

<div class="info2" onclick="change_text()">

Also change class to ID for your fields. For example: class="myname2" to id="myname2"

Javascript:

function change_text() {
    var text1 = document.getElementById('myname2');
    var text2 = document.getElementById('myprof2');
    var img1 = document.getElementById("myimg2");

    if (text1.innerHTML === "Name: Jane Doe") {
        text1.innerHTML = "test";
    }
    if (text2.innerHTML === "Profession: Something") {
        text2.innerHTML = "test";
    }
    if (img1.src == "link here") {
            img1.src = "link here";
    }
}

Kinda messy method but it will be easier for you to understand from this method :)

DEMO

Upvotes: 0

Related Questions