I have just started learning to code and am currently building my first calculator using javascript. It works coming down to the input being projected on the screen from clicking the button and the 'C' clear button clears the input screen, however I keep getting a syntax error when using the '=" button when trying to evaluate and need assistance, have tried multiple ways but am struggling when trying to use the screen.value.
// Selecting elements
const buttons = document.querySelectorAll(".btn");
let screen = document.getElementById("input");
//function to add input onto screen
const addTo = function(e) {
screen.value += e;
};
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function() {
// log click to a variable
const input = buttons[i].value;
// add clicked input to screen
addTo(input);
// make screeninput evaluate sum
if (input === "=") {
let equals = eval(screen.value);
equals = screen.value;
} else if (input === "C") {
screen.value = " ";
}
});
}
<h1>MY CALCULATOR</h1>
<div id=c alc class="calc-container">
<div id=s creen class="input-container">
<input type=text name=d isplay id=i nput class="user-input" value="" />
</div>
<div id="wrapper" class="button-container">
<input value="9" type=b utton class="btn" />
<input value="8" type=b utton class="btn" />
<input value="7" type=b utton class="btn" />
<input value="6" type=b utton class="btn" />
<input value="5" type=b utton class="btn" />
<input value="4" type=b utton class="btn" />
<input value="3" type=b utton class="btn" />
<input value="2" type=b utton class="btn" />
<input value="1" type=b utton class="btn" />
<input value="*" type=b utton class="btn" />
<input value="0" type=b utton class="btn" />
<input value="+" type=b utton class="btn" />
<input value="/" type=b utton class="btn" />
<input value="-" type=b utton class="btn" />
<input value="=" type=b utton class="btn equals">
<input value="." type=b utton class="btn" />
<input value="C" type=b utton class="btn" />
</div>
</div>
In case of = you are trying to evaluate an expression with =, for example 10+2=. Which is an invalid expression. You should avoid that = from the eval statement and execute only 10+2.
Call addTo only if the input is not = and C to fix this.
// Selecting elements
const buttons = document.querySelectorAll(".btn");
let screen = document.getElementById("input");
//function to add input onto screen
const addTo = function (e) {
screen.value += e;
};
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function () {
// log click to a variable
const input = buttons[i].value;
// make screeninput evaluate sum
if (input === "=") {
let equals = eval(screen.value);
screen.value = equals;
} else if (input === "C") {
screen.value = " ";
} else {
// add clicked input to screen
addTo(input);
}
});
}
<h1>MY CALCULATOR</h1>
<div id=calc class="calc-container">
<div id=screen class="input-container">
<input type=text name=display id=input class="user-input" value="">
</input>
</div>
<div id="wrapper" class="button-container">
<input value="9" type=button class="btn"></input>
<input value="8" type=button class="btn"></input>
<input value="7" type=button class="btn"></input>
<input value="6" type=button class="btn"></input>
<input value="5" type=button class="btn"></input>
<input value="4" type=button class="btn"></input>
<input value="3" type=button class="btn"></input>
<input value="2" type=button class="btn"></input>
<input value="1" type=button class="btn"></input>
<input value="*" type=button class="btn"></input>
<input value="0" type=button class="btn"></input>
<input value="+" type=button class="btn"></input>
<input value="/" type=button class="btn"></input>
<input value="-" type=button class="btn"></input>
<input value="=" type=button class="btn equals"></input>
<input value="." type=button class="btn"></input>
<input value="C" type=button class="btn"></input>
</div>
</div>
Because of you do eval(screen.value).
When you call the eval function, your screen.value is 'xxxx='.
This is not in the syntax of eval.
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
I am making a simple calculator with vanilla.js. However, I am having difficulty on creating the functionalities. I can get to display the number when click, but not when I click multiple times or delete that value on click. i tried addeventlistener but i always get an Type Error "addeventlistener not a function".. if you have any recommended website or tutorial to better understand vanilla, please point it.. thanks in advance
var result = document.querySelector('#result');
var clear = document.querySelector('#delete');
var backSpace = document.querySelector('.backspace');
var numbers = document.querySelectorAll('.input-btn');
var operators = document.querySelector('.operator-right');
var equalBtn = document.querySelector('.equal-btn');
function insert(num) {
result.value = num;
}
<div class="container">
<div class="calc">
<div class="result">
<input class="input-btn__result" id="result" value="0">
</div>
<div class="btns">
<input class="clear" id="delete" type="button" onClick="clear()" value="C">
<input class="backspace" type="button" name="" value="<">
<input class="input-btn__divide operator-right" type="button" name="" value="/">
<input class="input-btn" type="button" onClick="insert(1)" value="1">
<input class="input-btn" type="button" onClick="insert(2)" name="" value="2">
<input class="input-btn" type="button" onClick="insert(3)" name="" value="3">
<input class="input-btn operator-right" type="button" name="" value="*">
<input class="input-btn" type="button" onClick="insert(4)" name="" value="4">
<input class="input-btn" type="button" onClick="insert(5)" name="" value="5">
<input class="input-btn" type="button" onClick="insert(6)" name="" value="6">
<input class="input-btn operator-right" type="button" name="" value="+">
<input class="input-btn" type="button" onClick="insert(7)" name="" value="7">
<input class="input-btn" type="button" onClick="insert(8)" name="" value="8">
<input class="input-btn" type="button" onClick="insert(9)" name="" value="9">
<input class="input-btn operator-right" type="button" name="" value="-">
<input class="input-btn" type="button" onClick="insert('.')" name="" value=".">
<input class="input-btn" type="button" onClick="insert(0)" name="" value="0">
<input class="equal-btn" type="button" name="" value="=">
</div>
</div>
</div>
There are multiple ways of doing what you want to do. Stack Overflow is not a place to ask for recommendations on resources for learning vanilla JS (if you google you can find multiple good resources and pick the one you like best). As Alvin already mentioned in his answer, you definitely want to learn more about how to use addEventListener.
This is how I'd do it using your HTML (with one important exception: I've eliminated all your onClick HTML attributes -- it's best to separate your JavaScript code from your HTML structure):
const result = document.getElementById('result'),
btns = document.querySelector('div.btns');
/*
calculandum here is the previous number,
to be used with the math operation (+, -, /, *)
*/
let calculandum = '';
// addEventListener to all your buttons
for (let child of btns.children) {
child.addEventListener('click', insert);
}
function insert(e) { // e is the event; e.target is the HTML element; e.target.value is this element's value
let btnValue = e.target.value;
switch (btnValue){
case 'C':
result.value = '0';
calculandum = '';
break;
case '<':
if (result.value) result.value = result.value.slice(0,-1);
if (result.value === '') result.value = '0';
break;
case '*':
if (result.value) { // result.value will be '' after an operator is clicked, as can be seen in the next lines
calculandum += result.value + '*';
result.value = '';
}
break;
case '=':
calculandum += result.value;
result.value = eval(calculandum);
calculandum = '';
break;
default:
result.value === '0' ? result.value = btnValue : result.value += btnValue;
}
}
<div class="container">
<div class="calc">
<div class="result">
<input class="input-btn__result" id="result" value="0">
</div>
<div class="btns">
<input class="clear" id="delete" type="button" value="C">
<input class="backspace" type="button" name="" value="<">
<input class="input-btn__divide operator-right" type="button" name="" value="/">
<input class="input-btn" type="button" value="1">
<input class="input-btn" type="button" name="" value="2">
<input class="input-btn" type="button" name="" value="3">
<input class="input-btn operator-right" type="button" name="" value="*">
<input class="input-btn" type="button" name="" value="4">
<input class="input-btn" type="button" name="" value="5">
<input class="input-btn" type="button" name="" value="6">
<input class="input-btn operator-right" type="button" name="" value="+">
<input class="input-btn" type="button" name="" value="7">
<input class="input-btn" type="button" name="" value="8">
<input class="input-btn" type="button" name="" value="9">
<input class="input-btn operator-right" type="button" name="" value="-">
<input class="input-btn" type="button" name="" value=".">
<input class="input-btn" type="button" name="" value="0">
<input class="equal-btn" type="button" name="" value="=">
</div>
</div>
</div>
This should work for multiplications, from this example you can code the rest of the operations. You can also note I've eliminated most of your vars because they weren't doing anything. One final note is that I'd definitely rethink how you're using classes for your HTML elements. For example, classes should be used for multiple elements, you can use IDs for just one element (so, classes calc and btns maybe should be IDs).
You can add a class name for input buttons which for insert function, and then use addEventListener to add event.
var result = document.querySelector('#result');
var clear = document.querySelector('#delete');
var backSpace = document.querySelector('.backspace');
var numbers = document.querySelectorAll('.input-btn');
var operators = document.querySelector('.operator-right');
var equalBtn = document.querySelector('.equal-btn');
var insertBtns = document.querySelectorAll('.insert-btn');
function insert(e) {
result.value = e.target.value;
}
for (var i = 0; i < insertBtns.length; i++) {
insertBtns[i].addEventListener('click', insert);
}
<div class="container">
<div class="calc">
<div class="result">
<input class="input-btn__result" id="result" value="0">
</div>
<div class="btns">
<input class="clear" id="delete" type="button" onClick="clear()" value="C" >
<input class="backspace" type="button" name="" value="<">
<input class="input-btn__divide operator-right" type="button" name="" value="/">
<input class="input-btn insert-btn" type="button" value="1">
<input class="input-btn insert-btn" type="button" name="" value="2">
<input class="input-btn insert-bt" type="button" name="" value="3">
<input class="input-btn operator-right" type="button" name="" value="*">
<input class="input-btn insert-btn" type="button" name="" value="4">
<input class="input-btn insert-btn" type="button" name="" value="5">
<input class="input-btn insert-btn" type="button" name="" value="6">
<input class="input-btn operator-right" type="button" name="" value="+">
<input class="input-btn insert-btn" type="button" name="" value="7">
<input class="input-btn insert-btn" type="button" name="" value="8">
<input class="input-btn insert-btn" type="button" name="" value="9">
<input class="input-btn operator-right" type="button" name="" value="-">
<input class="input-btn insert-btn" type="button" name="" value=".">
<input class="input-btn insert-btn" type="button" name="" value="0">
<input class="equal-btn" type="button" name="" value="=">
</div>
</div>
</div>
I have a simple calculator with 2 inputs, and when I click on button I want to check if one of inputs is focused and if yes to enter that number.
But when I click on button I lose focus on inputs and get it on that button.
let activeElement = document.activeElement;
function numClick(number){
console.log("Num clicked=" + number);
let tempNumber="";
tempNumber = activeElement.value;
tempNumber = tempNumber + number;
activeElement.value=tempNumber;
}
<input id = "num1" type="text" name="num1" value="">
<span id="operacija"></span>
<input id = "num2" type="text" name="num2" value="">
<span>=</span>
<span id="rezultat">0</span>
<br><br>
<input type="button" onclick="clearIt() "value="C">
<input type="button" onclick="operationClick('/')"value="/">
<br>
<input type="button" onclick="numClick(7)" value="7">
<input type="button" onclick="numClick(8)" value="8">
<input type="button" onclick="numClick(9)" value="9">
<input type="button" onclick="operationClick('*')"value="*">
<br>
<input type="button" onclick="numClick(4)" value="4">
<input type="button" onclick="numClick(5)" value="5">
<input type="button" onclick="numClick(6)" value="6">
<input type="button" onclick="operationClick('-')"value="-">
<br>
<input type="button" onclick="numClick(1)" value="1">
<input type="button" onclick="numClick(2)" value="2">
<input type="button" onclick="numClick(3)" value="3">
<input type="button" onclick="operationClick('+')" value="+">
<br>
<input type="button" onclick="numClick(0)" value="0">
<input type="button" onclick="calculate()" value="=">
<br>
<script type="text/javascript" src="zadatak1.js"></script>
I am not using any framework, just JS...
This is just a working sample of the suggestion given by Teemu. So credit there.
We add a focus event to our input controls and record the last focused control.
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('#num1').addEventListener('focus', setLastElement);
document.querySelector('#num2').addEventListener('focus', setLastElement);
});
var lastInputElement;
const setLastElement = (event) => {
lastInputElement = event.target;
console.log(event.target);
};
let activeElement = document.activeElement;
function numClick(number){
if (lastInputElement === undefined) return;
console.log("Num clicked=" + number);
let tempNumber="";
tempNumber = lastInputElement.value;
tempNumber = tempNumber + number;
activeElement.value=tempNumber;
}
<input id = "num1" type="text" name="num1" value="">
<span id="operacija"></span>
<input id = "num2" type="text" name="num2" value="">
<span>=</span>
<span id="rezultat">0</span>
<br><br>
<input type="button" onclick="clearIt() "value="C">
<input type="button" onclick="operationClick('/')"value="/">
<br>
<input type="button" onclick="numClick(7)" value="7">
<input type="button" onclick="numClick(8)" value="8">
<input type="button" onclick="numClick(9)" value="9">
<input type="button" onclick="operationClick('*')"value="*">
<br>
<input type="button" onclick="numClick(4)" value="4">
<input type="button" onclick="numClick(5)" value="5">
<input type="button" onclick="numClick(6)" value="6">
<input type="button" onclick="operationClick('-')"value="-">
<br>
<input type="button" onclick="numClick(1)" value="1">
<input type="button" onclick="numClick(2)" value="2">
<input type="button" onclick="numClick(3)" value="3">
<input type="button" onclick="operationClick('+')" value="+">
<br>
<input type="button" onclick="numClick(0)" value="0">
<input type="button" onclick="calculate()" value="=">
<br>
<script type="text/javascript" src="zadatak1.js"></script>
You can do something like this:
var activeInput = ""
function inputClick(input){
activeInput = input;
}
function numClick(number){
document.getElementById(activeInput).value += number;
}
<input id="num1" type="text" name="num1" value="" onclick=inputClick('num1')>
<span id="operacija"></span>
<input id="num2" type="text" name="num2" value="" onclick=inputClick('num2')>
<span>=</span>
<span id="rezultat">0</span>
<br><br>
<input type="button" onclick="clearIt() "value="C">
<input type="button" onclick="operationClick('/')"value="/">
<br>
<input type="button" onclick="numClick(7)" value="7">
<input type="button" onclick="numClick(8)" value="8">
<input type="button" onclick="numClick(9)" value="9">
<input type="button" onclick="operationClick('*')"value="*">
<br>
<input type="button" onclick="numClick(4)" value="4">
<input type="button" onclick="numClick(5)" value="5">
<input type="button" onclick="numClick(6)" value="6">
<input type="button" onclick="operationClick('-')"value="-">
<br>
<input type="button" onclick="numClick(1)" value="1">
<input type="button" onclick="numClick(2)" value="2">
<input type="button" onclick="numClick(3)" value="3">
<input type="button" onclick="operationClick('+')" value="+">
<br>
<input type="button" onclick="numClick(0)" value="0">
<input type="button" onclick="calculate()" value="=">
<br>
If you are ready to use Jquery, then you can try this code
let activeElement = document.activeElement;
var prevFocus;
$('input[type="text"]').focus(function() {
prevFocus = $(this);
});
function numClick(number){
console.log("Num clicked=" + number);
let tempNumber="";
tempNumber = activeElement.value;
tempNumber = tempNumber + number;
activeElement.value=tempNumber;
number= prevFocus.val() +''+ number
prevFocus.val(number)
prevFocus.focus()
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id = "num1" type="text" name="num1" value="">
<span id="operacija"></span>
<input id = "num2" type="text" name="num2" value="">
<span>=</span>
<span id="rezultat">0</span>
<br><br>
<input type="button" onclick="clearIt() "value="C">
<input type="button" onclick="operationClick('/')"value="/">
<br>
<input type="button" onclick="numClick(7)" value="7">
<input type="button" onclick="numClick(8)" value="8">
<input type="button" onclick="numClick(9)" value="9">
<input type="button" onclick="operationClick('*')"value="*">
<br>
<input type="button" onclick="numClick(4)" value="4">
<input type="button" onclick="numClick(5)" value="5">
<input type="button" onclick="numClick(6)" value="6">
<input type="button" onclick="operationClick('-')"value="-">
<br>
<input type="button" onclick="numClick(1)" value="1">
<input type="button" onclick="numClick(2)" value="2">
<input type="button" onclick="numClick(3)" value="3">
<input type="button" onclick="operationClick('+')" value="+">
<br>
<input type="button" onclick="numClick(0)" value="0">
<input type="button" onclick="calculate()" value="=">
<br>
This is sample code update. I have kept a track of the last focused on input and changed the text accordingly. I am guessing this is what you asked for. You can write the methods to control the value of the input fields accordingly.
<!-- Added an extra method to remember the last focus, we pass the element as the function param: -->
<input id="num1" type="text" name="num1" value="" onclick='updateFocus(num1)'>
<span id="operacija"></span>
<input id="num2" type="text" name="num2" value="" onclick='updateFocus(num2)'>
<span>=</span>
<span id="rezultat">0</span>
<br><br>
<input type="button" onclick="clearIt() " value="C">
<input type="button" onclick="operationClick('/')" value="/">
<br>
<input type="button" onclick="numClick(7)" value="7">
<input type="button" onclick="numClick(8)" value="8">
<input type="button" onclick="numClick(9)" value="9">
<input type="button" onclick="operationClick('*')" value="*">
<br>
<input type="button" onclick="numClick(4)" value="4">
<input type="button" onclick="numClick(5)" value="5">
<input type="button" onclick="numClick(6)" value="6">
<input type="button" onclick="operationClick('-')" value="-">
<br>
<input type="button" onclick="numClick(1)" value="1">
<input type="button" onclick="numClick(2)" value="2">
<input type="button" onclick="numClick(3)" value="3">
<input type="button" onclick="operationClick('+')" value="+">
<br>
<input type="button" onclick="numClick(0)" value="0">
<input type="button" onclick="calculate()" value="=">
<br>
<script>
var activeElement;
// Updating the current focused on input field:
function updateFocus(input) {
activeElement = input;
console.log("The active element is: +" + activeElement);
}
// Ensuring the number sent on click event is added to the current input box.
function numClick(number) {
// If a button pressed before focusing on any of the inputs:
if (activeElement == null) return;
console.log("Num clicked: " + number);
var tempText = activeElement.value;
tempText += number;
activeElement.value = tempText;
}
</script>
I have written a calculator script which currently allows me to type invalid input values like 5*****5. Such inputs (where one arithmetic operator like *, + etc immediately follows another) should be restricted because they make no sense. How can I modify my code to restrict such inputs?
function c(val) {
var1 = $("#bar").val(val);
}
function v(val) {
var2 = $("#bar").val($("#bar").val() + val);
}
function equal() {
var3 = c(eval($("#bar").val()));
}
function reset() {
var4 = $("#bar").val("");
}
$(document).ready(function() {
$("#backspace").click(function() {
var barValue = $("#bar").val();
$("#bar").val(barValue.substring(0, barValue.length - 1));
});
});
<p>
<input type="text" id="bar" size="15" readonly>
<input type="button" value="C" onclick="reset('')">
</p>
<p>
<input type="button" value="←" id="backspace">
<input type="button" value="" onclick="">
<input type="button" value="" onclick="">
<input type="button" value="" onclick="">
<input type="button" value="" onclick="">
</p>
<p>
<input type="button" value="7" onclick="v('7')">
<input type="button" value="8" onclick="v('8')">
<input type="button" value="9" onclick="v('9')">
<input type="button" value="/" onclick="v('/')">
<input type="button" value="" onclick="">
</p>
<p>
<input type="button" value="4" onclick="v('4')">
<input type="button" value="5" onclick="v('5')">
<input type="button" value="6" onclick="v('6')">
<input type="button" value="*" onclick="v('*')">
<input type="button" value="" onclick="">
</p>
<p>
<input type="button" value="1" onclick="v('1')">
<input type="button" value="2" onclick="v('2')">
<input type="button" value="3" onclick="v('3')">
<input type="button" value="-" onclick="v('-')">
<input type="button" value="" onclick="">
</p>
<p>
<input type="button" value="0" onclick="v('0')">
<input type="button" value="." onclick="v('.')">
<input type="button" value="+" onclick="v('+')">
<input type="button" value="=" onclick="equal()" id="equal">
<input type="button" value="" onclick="">
</p>
<div id="history"></div>
Here is a JSFiddle Link to the full source.
Use regular expressions. Test to see if last value is +,-,*,or /
If the lastChar matches this criteria and so does the passed value do not do anything.
function v(val) {
var patt = /\+|\-|\*|\//
var barValue = $("#bar").val();
var lastChar = barValue.substring(barValue.length, barValue.length - 1);
if (patt.test(lastChar) && patt.test(val)) {
//do nothing as current val and lastChar are mathematical characters
} else {
//update the formula
var2 = $("#bar").val($("#bar").val() + val);
}
}
I have this HTML (is just a simple pocket calculator):
<html>
<head>
<script type="text/javascript" src="js/SimpleCalculator.js"></script>
</head>
<body>
<h2>Simple Calculator</h2>
<div class="calculator">
<div class="display"><input type="text" readonly size="20" id="dsp"></div>
<div class="keys">
<p><input type="button" value="7" onclick='getValue(this.value)'>
<input type="button" value="8" onclick='getValue(this.value)'>
<input type="button" value="9" onclick='getValue(this.value)'>
<input type="button" value="/" onclick='getValue(this.value)'>
</p>
<p><input type="button" value="4" onclick='getValue(this.value)'>
<input type="button" value="5" onclick='getValue(this.value)'>
<input type="button" value="6" onclick='getValue(this.value)'>
<input type="button" value="*" onclick='getValue(this.value)'>
</p>
<p><input type="button" value="1" onclick='getValue(this.value)'>
<input type="button" value="2" onclick='getValue(this.value)'>
<input type="button" value="3" onclick='getValue(this.value)'>
<input type="button" value="-" onclick='getValue(this.value)'>
</p>
<p><input type="button" value="0" onclick='getValue(this.value)'>
<input type="button" value="." onclick='getValue(this.value)'>
<input type="button" value="+" onclick='getValue(this.value)'></p>
<p><input type="button" value="C" onclick='getValue(this.value)'>
<input type="button" value="=" onclick='getValue(this.value)'></p>
</div>
</div>
</body>
</html>
and the JS file:
var s = '';
function getValue(val){
alert(val);
if (val != 'C' && val != '='){s += val;
document.getElementById("dsp").value+=val;}
if (val === 'C')
document.getElementById("dsp").value = " ";
if (val === '='){
alert(document.getElementByVal("dsp").value);
var res = eval(s);
document.getElementByVal("dsp").value = res;
}
}
The keys are displayed (numbers and math signs), alerts work fine but the evaluation of the expession is not displayed. Where am I wrong ?
You should use getElementById not ByVal, which is not a function.
var s = '';
function getValue(val){
if (val != 'C' && val != '='){s += val;
document.getElementById("dsp").value+=val;}
if (val === 'C')
document.getElementById("dsp").value = " ";
if (val === '='){
alert(document.getElementById("dsp").value);
var res = eval(s);
document.getElementById("dsp").value = res;
}
}
<h2>Simple Calculator</h2>
<div class="calculator">
<div class="display"><input type="text" readonly size="20" id="dsp"></div>
<div class="keys">
<p><input type="button" value="7" onclick='getValue(this.value)'>
<input type="button" value="8" onclick='getValue(this.value)'>
<input type="button" value="9" onclick='getValue(this.value)'>
<input type="button" value="/" onclick='getValue(this.value)'>
</p>
<p><input type="button" value="4" onclick='getValue(this.value)'>
<input type="button" value="5" onclick='getValue(this.value)'>
<input type="button" value="6" onclick='getValue(this.value)'>
<input type="button" value="*" onclick='getValue(this.value)'>
</p>
<p><input type="button" value="1" onclick='getValue(this.value)'>
<input type="button" value="2" onclick='getValue(this.value)'>
<input type="button" value="3" onclick='getValue(this.value)'>
<input type="button" value="-" onclick='getValue(this.value)'>
</p>
<p><input type="button" value="0" onclick='getValue(this.value)'>
<input type="button" value="." onclick='getValue(this.value)'>
<input type="button" value="+" onclick='getValue(this.value)'></p>
<p><input type="button" value="C" onclick='getValue(this.value)'>
<input type="button" value="=" onclick='getValue(this.value)'></p>
</div>
</div>
Change the last line to use getElementById, not getElementByVal
So here's what my code does:
it displays 10 sets of radio buttons, each with 2 options. (so 20 radio buttons total). The 10 sets all have different names, but are within the same form. A person can only choose 5 buttons out of the 10. I have a piece of code that disables the radio buttons once 5 are selected. Now I want to prevent people from submitting the form if 4 or less buttons are selected.
Here is an example of the code:
HTML:
<form method="post" action="index.php" name="buttons" onsubmit="return Validation()">
<input type="radio" id="button" value="first_button" name="1" />
<input type="radio" id="button" value="second_button" name="1" />
<input type="radio" id="button" value="first_button" name="2" />
<input type="radio" id="button" value="second_button" name="2" />
<input type="radio" id="button" value="first_button" name="3" />
<input type="radio" id="button" value="second_button" name="3" />
<input type="radio" id="button" value="first_button" name="4" />
<input type="radio" id="button" value="second_button" name="4" />
<input type="radio" id="button" value="first_button" name="5" />
<input type="radio" id="button" value="second_button" name="5" />
<input type="radio" id="button" value="first_button" name="6" />
<input type="radio" id="button" value="second_button" name="6" />
<input type="radio" id="button" value="first_button" name="7" />
<input type="radio" id="button" value="second_button" name="7" />
<input type="radio" id="button" value="first_button" name="8" />
<input type="radio" id="button" value="second_button" name="9" />
<input type="radio" id="button" value="first_button" name="9" />
<input type="radio" id="button" value="second_button" name="9" />
<input type="radio" id="button" value="first_button" name="10" />
<input type="radio" id="button" value="second_button" name="10" />
</form>
JAVASCRIPT
function Validation()
{
var bol2 = $("input:radio:checked").length;
if (bol2<=4)
{
alert("Please select 5 buttons");
return false;
}
}
The code now works. Thanks #Climbage, I looked at other code and figured out what to do
Try this - http://jsfiddle.net/BeT4h/
<form method="post" action="index.php" name="buttons" id="form">
<script>
function showTime() {
var inputs = document.getElementById("form").elements;
var count = 0;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == 'radio' && inputs[i].checked) {
count++;
}
}
alert(count);
}
</script>
Just make 5 of them checked by default.
Put check='checked' for every other input. Put in all first_button or second_button.