<html>
<body>
<script>
function moveNumbers(num) {
var txt=document.getElementById("result").value;
txt=txt + num;
document.getElementById("result").value=txt;
}
</script>
Select numbers: <br> <input type="button" value="1" name="no" onclick="moveNumbers(this.value)">
<input type="button" value="2" name="no" onclick="moveNumbers(this.value)">
<input type="button" value="3" name="no" onclick="moveNumbers(this.value)">
<input type="text" id="result" size="20">
<br>
<br>
<br>
<script> function moveNumbers(num) {
var txt=document.getElementById("result").value;
txt=txt + num;
document.getElementById("result").value=txt;
}
</script>
Select numbers: <br> <input type="button" value="a" name="no" onclick="moveNumbers(this.value)">
<input type="button" value="b" name="no" onclick="moveNumbers(this.value)">
<input type="button" value="c" name="no" onclick="moveNumbers(this.value)"> <input type="text" id="result" size="20">
</html>
</body>
Hi all, I have 2 button sets, "1, 2, 3" and "a, b, c". Having trouble trying separate the inputs to there own text boxes on the same page any ideas?. Tried a few things here and there like changing "value" "name" etc. Fairly new at this. Thanks for your help....
You have to do these things
1) Never have same ID's on the same page they should be different.
This attribute defines a unique identifier (ID) which must be unique
in the whole document. Its purpose is to identify the element when
linking (using a fragment identifier), scripting, or styling (with
CSS)
more here.
2) Never have same name for two functions.
3) Your <body> tag should be closed before <html> tag.
<html>
<body>
Select numbers: <br> <input type="button" value="1" name="no" onclick="moveNumbers1(this.value)">
<input type="button" value="2" name="no" onclick="moveNumbers1(this.value)">
<input type="button" value="3" name="no" onclick="moveNumbers1(this.value)">
<input type="text" id="result" size="20">
<br>
<br>
<br>
<script>
function moveNumbers2(num) {
var txt=document.getElementById("result2").value;
txt=txt + num;
document.getElementById("result2").value=txt;
}
function moveNumbers1(num) {
var txt=document.getElementById("result").value;
txt=txt + num;
document.getElementById("result").value=txt;
}
</script>
Select numbers: <br> <input type="button" value="a" name="no" onclick="moveNumbers2(this.value)">
<input type="button" value="b" name="no" onclick="moveNumbers2(this.value)">
<input type="button" value="c" name="no" onclick="moveNumbers2(this.value)"> <input type="text" id="result2" size="20">
</body>
</html>
Dont use same id's in same page for component and function name as well.
The second function will be overwritten on first function (Which means first function will be discarded, it will work).
<html>
<body>
<script>
function moveNumbers(num) {
var txt=document.getElementById("result1").value;
txt=txt + num;
document.getElementById("result1").value=txt;
}
function moveAlpha(num) {
var txt=document.getElementById("result").value;
txt=txt + num;
document.getElementById("result").value=txt;
}
</script>
Select numbers: <br> <input type="button" value="1" name="no" onclick="moveNumbers(this.value)">
<input type="button" value="2" name="no" onclick="moveNumbers(this.value)">
<input type="button" value="3" name="no" onclick="moveNumbers(this.value)">
<input type="text" id="result1" size="20">
<br>
<br>
<br>
Select numbers: <br> <input type="button" value="a" name="no" onclick="moveAlpha(this.value)">
<input type="button" value="b" name="no" onclick="moveAlpha(this.value)">
<input type="button" value="c" name="no" onclick="moveAlpha(this.value)"> <input type="text" id="result" size="20">
</html>
</body>
JJPA has highlighted the problems you have with your HTML and javascript the only thing i'd add is that you can create one function to do both jobs by making them reusable. This is more efficient and reduces the amount of code you need.
Something like this
moveNumbers(num, element){
var txt=document.getElementById(element).value;
txt=txt + num;
document.getElementById(element).value=txt;
}
and then you call the function like this
Select numbers: <br> <input type="button" value="1" name="no" onclick="moveNumbers1(this.value, "result")">
<input type="button" value="2" name="no" onclick="moveNumbers1(this.value, "result")">
<input type="button" value="3" name="no" onclick="moveNumbers1(this.value, "result")">
<input type="text" id="result" size="20">
Use spacs inbetween ur tags like this:
<input type="button" value="a" name="no" onclick="moveNumbers(this.value)">
</input>
<input type="button" value="b" name="no" onclick="moveNumbers(this.value)">
</input>
<input type="button" value="c" name="no" onclick="moveNumbers(this.value)">
Also u can have more buttons, once if any one is clicked its value get posted.
Related
I have the following:
HTML:
<input type="checkbox" name="1" value="" id="1" onclick="enableNextButton('5')">
<input type="checkbox" name="2" value="" id="2" onclick="enableNextButton('5')">
<input type="checkbox" name="3" value="" id="3" onclick="enableNextButton('5')">
<button type="button" id="next-btn-5" disabled>Submit</button>
Javascript:
function enableNextButton(quizID) {
if($("input[type=checkbox]").prop('checked') == true){
$('#next-btn-'+quizID).prop('disabled', false);
}else{
$('#next-btn-'+quizID).prop('disabled', true);
}
}
The problem is that it is only working for the first checkbox, for others it does not work, it does not fulfill the function.
Since you are using jQuery it is simpler to create a jQuery event listener than use an inline onclick and use a data attribute for the nextId value
$(':checkbox[data-next]').change(function(){
$('#next-btn-' + $(this).data('next')).prop('disabled', !this.checked);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>5:<input type="checkbox" name="1" value="" id="1" data-next="5"/></label>
<label>6:<input type="checkbox" name="2" value="" id="2" data-next="6"/></label>
<label>7:<input type="checkbox" name="3" value="" id="3" data-next="7"/></label>
<br/><br/>
<button type="button" id="next-btn-5" disabled>Button 5</button>
<button type="button" id="next-btn-6" disabled>Button 6</button>
<button type="button" id="next-btn-7" disabled>Button 7</button>
I would use the data-* attribute to store the button selector (ID in your case):
$("[data-enable]").on("input", function() {
const selector = this.dataset.enable
const $group = $(`[data-enable="${selector}"]`);
let ok = false;
if (/checkbox|radio/.test(this.type)) ok = $group.filter(":checked").length > 0;
if (/textarea/.test(this.type)) ok = $(this).val().trim().length > 0;
$(selector).attr("disabled", !ok);
});
<input type="checkbox" name="5-1" value="1" data-enable="#next-btn-5">
<input type="checkbox" name="5-2" value="2" data-enable="#next-btn-5">
<input type="checkbox" name="5-3" value="3" data-enable="#next-btn-5">
<button type="button" id="next-btn-5" disabled>Submit 5</button>
<br>
<input type="radio" name="30" value="1" data-enable="#next-btn-30">
<input type="radio" name="30" value="2" data-enable="#next-btn-30">
<input type="radio" name="30" value="3" data-enable="#next-btn-30">
<button type="button" id="next-btn-30" disabled>Submit 30</button>
<br>
<textarea name="foo" data-enable="#next-btn-31"></textarea>
<button type="button" id="next-btn-31" disabled>Submit 31</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Just trying to run a simple function when the button "calculate" is pressed. Function won't run at all when inputs are in a form, ultimately I want to be able to modify the other inputs when the calculate button is pressed. Any help at all please!
function calculate() {
alert("called");
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<form name="form">
Price:
<input name="priceCAD" value="0">
<br>
<br>Markup:
<input name="percentage" value="0">
<br>
<br>Fiat:
<input name="fiat" value="0">
<br>
<br>BTC:
<input name="btc" value="0" maxlength="11">
<br>
<br>
<input type="button" onClick="calculate()" name="calculate" value="Caculate">
<input type="button" name="clear" value="Clear" onClick="form.fiat.value=0, form.btc.value=0, form.markup.value=0">
</form>
Button HTML just need it:
<input type="button" onClick="calculate()" name="calculate" value="Caculate" >
And don't forget insert jquery lib in your <head>.
function calculate() {
alert("called");
}
document.getElementsByName("calculate")[0].addEventListener("click", calculate);
<form name="form">
Price:
<input name="priceCAD" value="0">
<br>
<br>Markup:
<input name="percentage" value="0">
<br>
<br>Fiat:
<input name="fiat" value="0">
<br>
<br>BTC:
<input name="btc" value="0" maxlength="11">
<br>
<br>
<input type="button" name="calculate" value="Caculate">
<input type="button" name="clear" value="Clear" onClick="form.fiat.value=0, form.btc.value=0, form.markup.value=0">
</form>
I am new at programming and I've tried a lot to find something that could help me with that problem.
<form name="calc">
<input name="rezultat"/>
<input type="button" name="1" value="2" onclick="run2()"/>
<input type="button" name="1" value="3" onclick="run3()"/>
<input type="button" name="1" value="4" onclick="run4()"/>
<input type="button" name="1" value="5" onclick="run5()"/>
<input type="button" name="1" value="6" onclick="run6()"/>
<input type="button" name="1" value="7" onclick="run7()"/>
<input type="button" name="1" value="8" onclick="run8()"/>
<input type="button" name="1" value="9" onclick="run9()"/>
<input type="button" name="1" value="10" onclick="run10()"/>
</form>
This is my HTML code
The idea is to make instant average of the numbers when I add a new one by clicking the specific button (every button has a value and an onclick proprety) and show that in the "rezultat" field.
I would be grateful if you'd help me with a script.
Here you go, most of the explanation is done inline in the comments.
<form id="calc" name="calc">
<input name="rezultat" id="rezultat" />
<input type="button" name="1" value="2" />
<input type="button" name="1" value="3" />
<input type="button" name="1" value="4" />
<input type="button" name="1" value="5" />
<input type="button" name="1" value="6" />
<input type="button" name="1" value="7" />
<input type="button" name="1" value="8" />
<input type="button" name="1" value="9" />
<input type="button" name="1" value="10" />
</form>
<script type="text/javascript">
var count = 0; // global scope variable
var total = 0; // global scope variable
// define your function to calculate a new value
var calc = function(e){
// add value of button clicked to total
total += Number(e.target.value);
// add 1 to the counter
count += 1;
// set rezultat to average (total / count)
document.getElementById('rezultat').value = total / count;
// stop bubbling and default handler
return false;
}
// get array of the buttons in the form
buttons = document.querySelectorAll('#calc input[type=button]');
// loop through the buttons
for(var i=0;i<buttons.length;i++){
// bind a handler for the click event of each button
buttons[i].addEventListener('click',calc,false);
}
</script>
I have a javascript that checks for navigator.platform and if linux armv6i (raspberry pi) I need it to add two divs (onscreen keypads) to the HTML page
this is my javascript logic:
function systemdetect()
{
systemname=navigator.platform;
if (systemname.indexOf("Linux armv6l")!=-1) {
systemname="pi"
document.write("<p>this is a test.</P>")
}
else {if (systemname.indexOf("Win32")!=-1) {
systemname="MS 32"
document.write("<p>this is a Win32 tes.</P>")
}
else {systemname="N/A"}};
}
This is one of the divs I need to add, the other is the same just keypad2 and num2
<div id="keypad" style=" display:none;" >
<input type="button" value="7" onclick="number('num').value+=7;"class="number"/>
<input type="button" value="8" onclick="number('num').value+=8;" class="number"/>
<input type="button" value="9" onclick="number('num').value+=9;" class="number"/><br/>
<input type="button" value="4" onclick="number('num').value+=4;" class="number"/>
<input type="button" value="5" onclick="number('num').value+=5;" class="number"/>
<input type="button" value="6" onclick="number('num').value+=6;" class="number"/><br/>
<input type="button" value="1" onclick="number('num').value+=1;" class="number"/>
<input type="button" value="2" onclick="number('num').value+=2;" class="number"/>
<input type="button" value="3" onclick="number('num').value+=3;" class="number"/><br/>
<input type="button" value="X" onclick="number('keypad').style.display='none'"class="number"/>
<input type="button" value="0" onclick="number('num').value+=0;" class="number"/>
<input type="button" value="←"
onclick="number('num').value=number('num').value.substr(0,number('num').value.length-1);" class="number"/>
</div>
I know document.write is not correct. I think I need to do some type of document.createElement. and element.appendchild(document.createTextNode... but I am not sure and what I tried works less than document.write.
I could just have document write "write" the complete HTML page but that seams like using an ax to do heart surgery.
thanks for any help you can provide.
Use document.body.appendChild(newElem)
function systemdetect() {
systemname = navigator.platform;
var test = document.createElement("p");
if (systemname.indexOf("Linux armv6l") != -1) {
systemname = "pi";
test.innerHTML = "this is a test.";
}
else if (systemname.indexOf("Win32") != -1) {
systemname = "MS 32";
test.innerHTML = "this is a Win32 test.";
}
else { systemname="N/A"; }
if(test.innerHTML != "") document.body.append(test);
}
Demo
If you want to add the large amount of inputs inside the div instead, use something like this
var keypad1 = document.createElement("div");
keypad1.innerHTML = "...Your inputs' HTML here...";
document.body.appendChild(keypad1);
Demo
var keypad = document.createElement("div");
//wrap the whole code for the input fields into an array, it will be converted into a string later
var inputFields = [<input type="button" value="7" onclick="number('num').value+=7;"class="number"/>
<input type="button" value="8" onclick="number('num').value+=8;" class="number"/>
<input type="button" value="9" onclick="number('num').value+=9;" class="number"/><br/>
<input type="button" value="4" onclick="number('num').value+=4;" class="number"/>
<input type="button" value="5" onclick="number('num').value+=5;" class="number"/>
<input type="button" value="6" onclick="number('num').value+=6;" class="number"/><br/>
<input type="button" value="1" onclick="number('num').value+=1;" class="number"/>
<input type="button" value="2" onclick="number('num').value+=2;" class="number"/>
<input type="button" value="3" onclick="number('num').value+=3;" class="number"/><br/>
<input type="button" value="X" onclick="number('keypad').style.display='none'"class="number"/>
<input type="button" value="0" onclick="number('num').value+=0;" class="number"/>
<input type="button" value="←"
onclick="number('num').value=number('num').value.substr(0,number('num').value.length-1);" class="number"/>];
/*The join() method converts all array elements to strings and concatenates them.
join() takes optional character or string as argument that is used to separate one element of the array from the next in the returned string. If this argument is omitted, a comma is used.*/
keypad.innerHTML = inputFields.join("");
//add the created div to the body
document.body.appendChild(keypad);
<body>
<FORM NAME="Calculator">
<TABLE BORDER=4>
<TR>
<TD>
<input type="text" name="Input" Size="22" value="">
<br>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="button" NAME="one" VALUE="1" class ="digit" >
<INPUT TYPE="button" NAME="two" VALUE="2" class ="digit" >
<INPUT TYPE="button" NAME="three" VALUE="3" class ="digit" >
<INPUT TYPE="button" NAME="plus" VALUE="+" class ="operand">
<br>
<INPUT TYPE="button" NAME="four" VALUE="4" class ="digit">
<INPUT TYPE="button" NAME="five" VALUE="5" class ="digit">
<INPUT TYPE="button" NAME="six" VALUE="6" class ="digit">
<INPUT TYPE="button" NAME="minus" VALUE="-" class="operand">
<br>
<INPUT TYPE="button" NAME="seven" VALUE="7" class ="digit">
<INPUT TYPE="button" NAME="eight" VALUE="8" class ="digit">
<INPUT TYPE="button" NAME="nine" VALUE="9" class ="digit">
<INPUT TYPE="button" NAME="times" VALUE="*" class ="operand">
<br>
<INPUT TYPE="button" NAME="clear" VALUE="c" class ="special">
<INPUT TYPE="button" NAME="zero" VALUE="0" class ="digit">
<INPUT TYPE="button" NAME="Execute" VALUE="=" class ="solve">
<INPUT TYPE="button" NAME="div" VALUE="/" class ="operand">
<br>
</TD>
</TR>
</TABLE>
</FORM>
<script type = "text/javascript" src="C:\Users\Quonn\Desktop\QBJS\calculatorjs.js">
</script>
</body>
I am building a configurable calculator but I am having some with my logic/getting it to behave exactly how i want. I have two questions.
Question # 1: How can I change my logic so that I can replace "evil eval"?
var timer;
document.onclick = function(x) {
var info = x.target;
clearTimeout(timer);
timer= setTimeout(function(){addDigit(x);},200);
}
Question #2: How can change my logic in this function so that after a calculation result is displayed, the first number entered for the next calculation isn't just concatenated to the previous calculation's result?
function addDigit(x){
if (x.target.className === "digit" || x.target.className ==="operand") {
document.Calculator.Input.value += "" + x.target.value;
}
else if (x.target.className === "solve") {
result = eval(document.Calculator.Input.value);
document.Calculator.Input.value = result;
}
else {
document.Calculator.Input.value = "";
}
}
You are concatenating strings. You should have a look at parseInt / parseFloat; watch out for the radix, otherwise JavaScript will try to guess it...