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);
Related
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 slight problem with inserting numbers in the input box.
To be more specific.I use the custom made keypad that shows on the screen,and the numbers can only be written in the input box by using that same keypad,with the max of 5 numbers that can be written.But the HTML maxlength atrribute in this case doesn't work.It works when I try to write the number using the actual keyboard,but when inserting with a custom keypad it won't work.
The question is how can I make it to work?
<script>
function addNumber(element) {
document.getElementById('child').value = document.getElementById('child').value + element.value;
}
function deleteNumber(){
document.getElementById('child').value='';
}
</script>
<div class='form-group'>
<div id="staticParent">
<div class='col-md-6'>
<input class='form-control' id='child' name="username" type='text' maxlength="5" readonly='readonly' />
<input type="button" class="fbutton" name="1" value="1" id="1" onClick=addNumber(this); />
<input type="button" class="fbutton" name="2" value="2" id="2" onClick=addNumber(this); />
<input type="button" class="fbutton" name="3" value="3" id="3" onClick=addNumber(this); />
<input type="button" class="fbutton" name="4" value="4" id="4" onClick=addNumber(this); />
<input type="button" class="fbutton" name="5" value="5" id="5" onClick=addNumber(this); />
<input type="button" class="fbutton" name="6" value="6" id="6" onClick=addNumber(this); />
<input type="button" class="fbutton" name="7" value="7" id="7" onClick=addNumber(this); />
<input type="button" class="fbutton" name="8" value="8" id="8" onClick=addNumber(this); />
<input type="button" class="fbutton" name="9" value="9" id="9" onClick=addNumber(this); />
<input type="button" class="fbutton" name="0" value="0" id="0" onClick=addNumber(this); />
<input type='button' class='fbutton' name='delete' value='Delete' onClick=deleteNumber(this); />
</div>
</div>
you can replace your addNumber function with below one, That will solve your problem.
function addNumber(element) {
var value1 = document.getElementById('child').value + element.value;
if(value1.length > 5) return false;
document.getElementById('child').value = value1;
}
you can try this maxlength=5.you will remove ""
<input class='form-control' id='child' name="username" type='text' maxlength=5 readonly='readonly' />
Since maxlength only works if the user actually uses the real keyboard and not for programatically changing the value, you can't do it like that.
To get around it simply apply a check in your addNumber function:
function addNumber() {
var input = document.getElementById('child');
if (input.value.length > 5) {
return false;
}
else {
// Do stuff
}
}
This won't add a new number unless the input length is less or equal to 5.
Also you shouldn't call things with the onclick attribute. Instead add your event listeners with addEventListener:
var addBtns = document.getElementsByClassName('fbutton');
for (var i = 0; i < addBtns.length; i++) {
addBtns[i].addEventListener('click', addNumber);
}
Note that you have to use a loop to add the event listeners since addBtns is an array.
<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.
<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...
How come method equal always returns with an "undefined" followed by a number?
and when I try to parse it. it returns me a NaN.
<!DOCTYPE>
<html>
<head>
<script>
var fnum;
var secondNum;
var operation;
function msg(val) {
document.getElementById("fnumtext").value += val;
fnum += val;
}
function showOperation(oper)
{
document.getElementById("fnumtext").value = "";
document.getElementById("operation").value = oper;
operation = oper;
}
function equal() {
secondNum = document.getElementById("fnumtext").value;
alert(fnum);
}
</script>
</head>
<body>
<input id = "fnumtext"type="text" name="firstnum" /><br />
<input id = "operation" type="text" name="secondnum" /><br />
<input type="button" value="1" onclick="msg('1')" />
<input type="button" value="2" onclick="msg('2')" />
<input type="button" value="3" onclick="msg('3')" /></br>
<input type="button" value="4" onclick="msg('4')" />
<input type="button" value="5" onclick="msg('5')" />
<input type="button" value="6" onclick="msg('6')" /><br/>
<input type="button" value="7" onclick="msg('7')" />
<input type="button" value="8" onclick="msg('8')" />
<input type="button" value="9" onclick="msg('9')" /></br>
<input type="button" value="0" onclick="msg('0')" /></br>
<input type="button" value="+" onclick="showOperation('+')" />
<input type="button" value="*" onclick="showOperation('*')" />
<input type="button" value="/" onclick="showOperation('/')" />
<input type="button" value="-" onclick="showOperation('-')" />
<input type="button" value="=" onclick="equal()" />
</body>
</html>
Your val variable in the msg() function is inputted as a string. So when you attempt to do +=, it treats its original value as a string so you end up doing 'undefined' + <some integer> creating your effect.
Try removing the single quotes from all your function calls in your onclick events, and just send the integer. Also, you should define var fnum = 0; rather than just declaring the variable if you want to use the += operator.
You call "alert" with "fnum" variable as param. It can be undefined if you press "equal" before pressing any other button