Zhi V Zhi V - 14 days ago 7
HTML Question

How to setAttribute for element from radiobutton without submit

I have many buttons. If I click by one of them calls this function:

function addOptions(id)
{
var button = document.getElementById(id); //clicked button
radioDiv = document.querySelector("div.radioDiv");
radioDiv.style.visibility = "visible";
var raz = document.getElementsByName('status'); //get radioButtons
$(".radioDiv").ready(function() {
$('input[type=radio][name=status]').change(function(){

/*Here I'm trying to set attribute to only one button but
here the problem: when I click a few buttons (example: 1st then 2nd, then 3rd)
and on 3rd button I choice the "radioButton" this code is set Attribute for
all of them (3) */

button.setAttribute("status", this.value);
});
});
}


enter image description here

Here index.html. RadioDiv is hidden by default

<div class="layer1">
<div class="radioDiv">
<input type="radio" value="sale" name="status">111
<input type="radio" value="inverted" name="status">222
</div>
</div>
<div class="layer2"></div>


So, I need to set Attribute for button from value of RadioButton.

Answer

Use a global variable at the beginning of your js file.

var lastButton;
function addOptions(id) {
  $(".radioDiv input[type=radio][name=status]").prop("checked", false);
  lastButton = document.getElementById(id); //last clicked button
  var status = lastButton.getAttribute("status");
  $(".radioDiv input[type=radio][name=status][value='" + status +"']").prop("checked", true);
  $(".radioDiv").prop("visible", true);
  $('input[type=radio][name=status]').click(function(){
    lastButton.setAttribute("status", this.value);
  });
}