how to change the color of a div by clicking specific radio button with native javascript

Question

Hello everyone at stackoverflow community

I try to create a function of native javascript..... i want to change the background-color of specific invoice_wrapper div to red if i click the radioyes button or green if i click radiono button

i want to do this by this keyword

how can i do this by native javascript not any library please

<?php foreach($fetches AS $electricities): ?>

<div class="invoice_wrapper">

<?php if($electricities->paid == "Yes"): ?>

Yes: <input onclick="" class="radioyes" type="radio" name="paid" value="<?php echo $electricities->paid; ?>" checked>
No: <input onclick="" class="radiono" type="radio" name="paid" value="No">

<?php else: ?>

Yes: <input onclick="" class="radioyes" type="radio" name="paid" value="<?php echo $electricities->paid; ?>">
No: <input onclick="" class="radiono" type="radio" name="paid" value="No" checked>

<?php endif; ?>

</div>

<?php endforeach; ?>

Answer 1

<?php foreach($fetches AS $electricities): ?>

<div class="invoice_wrapper <?=$electricities->paid == "Yes" ? 'paid' : 'unpaid'?>">

<?php if($electricities->paid == "Yes"): ?>

Yes: <input onclick="" class="radioyes" type="radio" name="paid" value="<?php echo $electricities->paid; ?>" checked>
No: <input onclick="" class="radiono" type="radio" name="paid" value="No">

<?php else: ?>

Yes: <input onclick="" class="radioyes" type="radio" name="paid" value="<?php echo $electricities->paid; ?>">
No: <input onclick="" class="radiono" type="radio" name="paid" value="No" checked>

<?php endif; ?>

</div>

<?php endforeach; ?>

Please note the change I have added is to the line <div class="invoice_wrapper" class="<?=$electricities->paid == "Yes" ? 'paid' : 'unpaid'?>">

Then add following css:

.paid {
  background-color: green; 
  //add the css you require for display
}

.unpaid {
  background-color: red;
  //css as required
}

In javascript, if you want to handle the click event, write a function that would then add/remove paid/unpaid classes as necessary, based on the clicked value.

eg:

var yesRadios = document.getElementsByClassName("radioyes");

for (var i = 0; i < yesRadios.length; i++) {
    yesRadios[i].addEventListener('click', setPaid);
}

function findAncestor (el, cls) {
    while ((el = el.parentElement) && !el.classList.contains(cls));
    return el;
}

function setPaid(event) {
   //Note my pure js is a bit rusty so not sure if event.target is the right element to pass here, but do try it out or search for how to get the currently clicked element in event handler in javascript.
   var invoiceWrapper = findAncestor(event.target, 'invoice_wrapper');
   invoiceWrapper.className = "invoice_wrapper paid";
}