I have to code a calculator in JS and i want for exampe if i press the radio button “Binär” that i can only press the 0, 1 ; if i press “Dezimal” i cann press 0-9, but not A-F.
function onclickRadio(umrechnung)
> {
let displayZahl = Number(document.getElementById("textboxDisplay").value);
if(umrechnung == "Binär")
> {
displayZahl = DezimalzahlZuBinaer(displayZahl);
modus = "Binär"
> }
document.getElementById("textboxDisplay").value = displayZahl;
if(umrechnung == "hexa")
> {
displayZahl = DezimalzahlZuHexa(displayZahl);
modus = "Hexa"
> }
document.getElementById("textboxDisplay").value = displayZahl;
if(umrechnung == "dezimal")
displayZahl = BinaerZuDezimal(document.getElementById("textboxDisplay").value);
modus = "dezimal"
> }
document.getElementById("textboxDisplay").value = displayZahl;
> }
> </script>
> </head>
> <body>
> <label> <input type = "radio" name = "Umrechnung" value = "hexa" onclick="onclickRadio('hexa')" /> Hexadezimal </label>
> <label> <input type = "radio" name = "Umrechnung" value = "Binär" onclick="onclickRadio('Binär')" /> Binär </label>
> <label> <input type = "radio" name = "Umrechnung" value = " Dezimal" onclick="onclickRadio('dezimal')" checked /> Dezimal </label>
> <input id="textboxDisplay" readonly />
> <input type="button" value="1" onclick="AddLetter('1')" />
> <input type="button" value="2" onclick="AddLetter('2')" />
> <input type="button" value="3" onclick="AddLetter('3')" />
> <input type="button" value="4" onclick="AddLetter('4')" />
> <input type="button" value="5" onclick="AddLetter('5')" />
> <input type="button" value="6" onclick="AddLetter('6')" />
> <input type="button" value="7" onclick="AddLetter('7')" />
> <input type="button" value="8" onclick="AddLetter('8')" />
> <input type="button" value="9" onclick="AddLetter('9')" />
> <input type="button" value="0" onclick="AddLetter('0')" />
> <input type="button" value="A" onclick="AddLetter('A')" />
> <input type="button" value="B" onclick="AddLetter('B')" />
> <input type="button" value="C" onclick="AddLetter('C')" />
> <input type="button" value="D" onclick="AddLetter('D')" />
> <input type="button" value="E" onclick="AddLetter('E')" />
> <input type="button" value="F" onclick="AddLetter('F')" />
> <input type="button" value="+" onclick="Plus()" />
> <input type="button" value="-" onclick="Minus()" />
> <input type="button" value="*" onclick="Mal()" />
> <input type="button" value="/" onclick="Geteilt()" />
> <input type="button" value="Mod" onclick="Restwert()" />
> <input type="button" value="Löschen" onclick="Weg()" />
> <input type="button" value="=" onclick="Gleich()" />
> </body>
i tried <button disabled> , but than its permanent disbaled. i just want to disable it when i am in the different mode.
To enable the buttons belonging to the selected base and disable all the other ones, you need a strategy that will be triggered when the click event occurs on those radio button options (binary/decimal/hex).
In particular regarding to that aspect, I used the classes digit base2 base10 base16 on those buttons so that by using basic css selectors I could, each time, first disable all of them, and then enable only those belonging to the selected base 2, 10, 16.
//disable all the .digit elements
document.querySelectorAll('.digit')
.forEach(el => el.disabled = true);
//enable all the .digit elements having the selected base
document.querySelectorAll(`.digit.base${selectedBase}`)
.forEach(el => el.disabled = false);
But in general I had to rewrite your logic in the slimmest way possible mainly addressing the followings:
- adding event handlers using
addEventListenerinstead of inline event
handlers because it’s not
reccomended
to mix javascript code with html. - Using css classes
digit base16 base10 base2to declare to which
base belonged each digit button.. so to have a convenient way to
discern which one to enable/disable according to the selected base; - Using
parseInt
to parse a string returning the corresponding number according to the
radix (base); - Using
Number.toString
to convert a number to string according to the radix (base);
const number = document.getElementById("number");
//selects all the .digit elements
document.querySelectorAll('.digit')
//for each one of them (as el)
.forEach( el => {
//adds the click event handler
el.addEventListener('click', (event)=>{
const digit = event.target.value;
if(number.value == '0')
number.value = '';
number.value += digit;
})
});
//selects all the input[name="mode"]
document.querySelectorAll('input[name="mode"]')
//for each one of them (as el)
.forEach( el => {
//adds the click event handler
el.addEventListener('click', (event)=>{
//the base selected from the radio button triggering the event
const selectedBase = event.target.value;
//disable all the .digit elements
document.querySelectorAll('.digit').forEach(el => el.disabled = true);
//enable all the .digit elements having the selected base
document.querySelectorAll(`.digit.base${selectedBase}`).forEach(el => el.disabled = false);
//parse the number in the input box using its stated base
const currentNumber = parseInt(number.value, number.dataset.base);
//rewrite the number in the input box using the selected base
number.value = currentNumber.toString(selectedBase).toUpperCase();
//save the selected base in the data-base attribute
number.dataset.base = selectedBase;
})
});input[type="radio"],
input[type="button"]
{
cursor: pointer;
}<label>Hexadecimal</label>
<input type="radio" name="mode" value="16">
<br>
<label>Binary</label>
<input type="radio" name="mode" value="2">
<br>
<label>Decimal</label>
<input type="radio" name="mode" value="10" checked>
<br>
<br>
<input id="number" data-base="10" value="0" readonly>
<input type="button" value="0" class="digit base16 base10 base2">
<input type="button" value="1" class="digit base16 base10 base2">
<input type="button" value="2" class="digit base16 base10">
<input type="button" value="3" class="digit base16 base10">
<input type="button" value="4" class="digit base16 base10">
<input type="button" value="5" class="digit base16 base10">
<input type="button" value="6" class="digit base16 base10">
<input type="button" value="7" class="digit base16 base10">
<input type="button" value="8" class="digit base16 base10">
<input type="button" value="9" class="digit base16 base10">
<input type="button" value="A" class="digit base16">
<input type="button" value="B" class="digit base16">
<input type="button" value="C" class="digit base16">
<input type="button" value="D" class="digit base16">
<input type="button" value="E" class="digit base16">
<input type="button" value="F" class="digit base16">
<br>
<br>
<input type="button" value="+" onclick="Plus()" disabled>
<input type="button" value="-" onclick="Minus()" disabled>
<input type="button" value="*" onclick="Mal()" disabled>
<input type="button" value="/" onclick="Geteilt()" disabled>
<input type="button" value="Mod" onclick="Restwert()" disabled>
<input type="button" value="Löschen" onclick="Weg()" disabled>
<input type="button" value="=" onclick="Gleich()" disabled>