Can't change invidual elements with same class

[bladi2]

So I have two values of €20 with the same class name "transaction-amount". I want to change one of the values to €250 and one to €200. I grabbed the current code from this thread. Unfortunately current code I'm using changes all €20 values to €250.

I tried adding a "if href" line but I think I did it completely wrong because I have no experience in programming and the code still turns all 20 values to 250.

function value1(){
  // Find all elements with 'transaction-amount' as one of its class names.
var elementsWithThisClassName = document.getElementsByClassName("transaction-amount");
// Check all those elements to see whether their amount is "+ €20".
for (var i = 0; i < elementsWithThisClassName.length; i++) {
    // If that is the case we change it to "+ €250"
    if (elementsWithThisClassName[i].innerHTML  == "+ €20") if ('[href*="/account/transactions/payments/22020219602354001"]')
{
        elementsWithThisClassName[i].innerHTML = "+ €250"
    }
};
}
setTimeout(value1, 1000);

[Ruud14]

Assuming the two elements have two different hrefs, you could do something like this. I don't know what the actual hrefs are so for demonstration let the href of the first element be "/your_href1" and the href of the second element "/your_href2".

Then your code could look something like this:

function value1(){
// Find all elements with 'transaction-amount' as one of its class names.
  var elementsWithThisClassName = document.getElementsByClassName("transaction-amount");
  // Loop over all elements with "transaction-amount" as their class name.
  for (var i = 0; i < elementsWithThisClassName.length; i++) {
      // Check if the innerHTML of the element is equal to "+ €20".
      if (elementsWithThisClassName[i].innerHTML  == "+ €20")
        {
            // Check if the href of the element is equal to "/your_href1".
            if(elementsWithThisClassName[i].href == "/your_href1"){
                // If it is we change the .innerHTML of that element to "+ €250".
                elementsWithThisClassName[i].innerHTML = "+ €250";
            }
            // Check if the href of the element is equal to "/your_href2".
            else if(elementsWithThisClassName[i].href == "/your_href2"){
                // If it is we change the .innerHTML of that element to "+ €200".
                elementsWithThisClassName[i].innerHTML = "+ €200" ;
            }
        }
  };
}
setTimeout(value1, 1000);

Another solution would be to keep track of the number of elements changed at a particular point in time. So here we check whether we've already changed an element. If we have, we change its value to "+ €200". If we don't, we change it to "+ €250".

function value1(){
    // Find all elements with 'transaction-amount' as one of its class names.
    var elementsWithThisClassName = document.getElementsByClassName("transaction-amount");
    // The number of changed elements so far.
    var changes = 0;
    // Loop over all elements with "transaction-amount" as their class name.
    for (var i = 0; i < elementsWithThisClassName.length; i++) {
        // Check if the innerHTML of the element is equal to "+ €20".
        if (elementsWithThisClassName[i].innerHTML  == "+ €20")
        {
            // If we have not changed any elements so far.
            if(changes == 0){
                // We change the .innerHTML of the element to "+ €250".
                elementsWithThisClassName[i].innerHTML = "+ €250";
            }
            // If we have already changed an element.
            else{
                // We change the .innerHTML of the element to "+ €200".
                elementsWithThisClassName[i].innerHTML = "+ €200";   
            }
            // Increase the number of changed elements by 1.
            changes += 1;
        }
    };
}
setTimeout(value1, 1000);

The comments (greyed out lines) explain what each line does.

Hope this helps :)