ASP.Net MVC Javascript Keyboard not working - javascript

My virtual keyboard was working but when I added the button inside a Form instead of a Div it stopped working.
This is my javascript code:
$(document).ready(function () {
function input(e) {
//var u = document.rateformular;// duplicated with f and not used
var f = document.rateformular;
var b = f.elements["ratezeichen"];
var zeichen = b.value;
zeichen.value = zeichen.value + e.value
}
And the button has this onclick:
<div class="cities">
<input id="btn1" type="button" value="a" class="btn btn-default" onclick="input(this);" />
</div>

your input function has to be declared in the global scope
outside $(document).ready(function () {...
or
directly attached to global object window.input = function(e) { ...

This is what I did to fix my problem.
function input(e) {
var f = document.rateformular;
var b = f.elements["ratezeichen"];
if (b.value == 0) {
b.value = b.value + e.value;
}
else {
}
The main problem was in the scope and then I had to make a few changes in the code.
Thanks StackOverFlow.
The if cicle is to prevent that the user can input 2 letters, they only can type 1 letter, it's the max lenght of the TextBox, it's part of my application.

Related

JS if statment inside function

i need help please,
im trying to check "if" condition inside a function and print it to the input field
but i always get false, why this if statement inside the function always return false?
and how can i fix it, Thanks.
<body>
<label>Value1:</label>
<input id='v1' type="number"><br><br>
<label>Value2:</label>
<input id='v2' type="number"><br><br>
<label>Value3:</label>
<input id='v3' type="number"><br><br>
<button onclick="calculateTriangle()">Answer</button>
<input id='ans'><br><br>
<script>
function calculateTriangle() {
var V1 = document.getElementById('v1').value;
var V2 = document.getElementById('v2').value;
var V3 = document.getElementById('v3').value;
console.log(V1);
console.log(V2);
console.log(V3);
var an = Triangle(V1,V2,V3)
document.getElementById('ans').value=an;
}
function Triangle(a,b,c){
if (a+b>c && a+c>b && b+c>a){
return true;
}
return false;
}
</script>
</body>
Parse your input values as an integer. Use these lines of code instead of yours. The values from your input fields are string.
So when you check a + b > c it concatenates a + b. Say you put a = 1 and b = 2 then it makes a + b = 12 instead of 3.
var V1 = parseInt(document.getElementById('v1').value);
var V2 = parseInt(document.getElementById('v2').value);
var V3 = parseInt(document.getElementById('v3').value);
if (a+b>c && a+c>b && b+c>a){
return true;
} else {
return false;
}

How do you use one button to switch upper case and lower case by using javascript

We need one button to switch upper case and lower case of 26 alphabet by using JavaScript, just like android input method did. The code of using two button is as below. In order to save space, we just gave 3 alphabet button.
Any help is appreciated!
<input type="button" id="myBtn_q" onclick="myFunctionTest(this.value)" value="q">
<input type="button" id="myBtn_w" onclick="myFunctionTest(this.value)" value="w">
<input type="button" id="myBtn_e" onclick="myFunctionTest(this.value)" value="e">
<input type="button" id="myBtn_upperCase" onclick="myFunctionupperCase()" value="upperCase">
<input type="button" id="myBtn_lowerCase" onclick="myFunctionlowerCase()" value="lowerCase">
function myFunctionupperCase() {
if(document.getElementById("myBtn_a").value=="a"){
alert(document.getElementById("myBtn_a").value);
var controller=97;
for (controller=97; controller < 123; controller++) {
var id_code="myBtn_"+String.fromCharCode(controller);
//alert(id_code);
document.getElementById(id_code).value=String.fromCharCode(controller-32);
}
}
}
function myFunctionlowerCase() {
if(document.getElementById("myBtn_a").value=="A"){
alert(document.getElementById("myBtn_a").value);
var controller=65;
for (controller=65; controller < 91; controller++) {
var id_code="myBtn_"+String.fromCharCode(controller).toLowerCase();
//alert(id_code);
document.getElementById(id_code).value=String.fromCharCode(controller+32);
}
}
}
We attempt to combine two button's code into one button. However, it did not works. The code is as below.
<input type="button" id="myBtn_caseChange" onclick="myFunctioncaseChange()" value="caseChange">
function myFunctioncaseChange() {
if(document.getElementById("myBtn_a").value=="a"){
document.getElementById("myBtn_caseChange").value=="Lower Case"
alert(document.getElementById("myBtn_a").value);
var controller=97;
for (controller=97; controller < 123; controller++) {
var id_code="myBtn_"+String.fromCharCode(controller);
document.getElementById(id_code).value=String.fromCharCode(controller-32);
}
}
if(document.getElementById("myBtn_a").value=="A"){
document.getElementById("myBtn_caseChange").value=="Upper Case"
alert(document.getElementById("myBtn_a").value);
var controller=65;
for (controller=65; controller < 91; controller++) {
var id_code="myBtn_"+String.fromCharCode(controller).toLowerCase();
document.getElementById(id_code).value=String.fromCharCode(controller+32);
}
}
}
This should do it:
(function() { // closure to encapsulate the toggle state
// choose the initial case
var is_upper = true;
// get the toggle button's ID
var toggle = document.getElementById('myBtn_toggle');
// helper function that sets the buttons how you want
function update() {
toggle.value = is_upper ? '\u21E9' : '\u21E7';
for (var c = 1; c <= 26; ++c) {
var lc = String.fromCharCode(96 + c);
var uc = String.fromCharCode(64 + c);
var el = document.getElementById('myBtn_' + lc);
if (!el) continue;
el.value = is_upper ? uc : lc;
}
}
// add an event handler _properly_, without inline handlers
toggle.addEventListener('click', function() {
is_upper = !is_upper; // flip the case
update(); // update the buttons
});
update(); // make sure the page starts how you want
})(); // execute the above closure immediately
Demo at https://jsfiddle.net/alnitak/1c5x76uf/

Changing Javascript variable value after onclick action

Pretty new to this Javascript thing.
I want to change a Javascript variable when a user inserts a number into an input field in my HTML document and clicks a button.
I'm assuming you'd use a function, but how do you gather the data and change the variable?
The stuff I tried to make looks a little something like this.
HTML
<input type="number" id="inputField">
<button onclick="changeTheVariable()" type="button" id="pushMe"></button>
Javascript
var a = 0;
function changeTheVariable() {
a = document.getElementById("inputField").value;
}
but it's not working!
Edit 1:
Wow. I didn't think I'd get this kind of attention. I also found it a bit strange it didn't work at first.
The question I'm asking is partly for a calculator here: https://titomagic.com/debug
It's simple, you type in a number, click the button and it calculates (based on other variables) to a result on the bottom.
Here's a link to the Javascript file, if you wanna have a look: https://titomagic.com/js/bursdagskalkulator.js
To those of you asking; yes, I've been testing with a console.log and the variable is not changing. It's not affecting the other variables (as it should?).
Also I've never heard of JSfiddle.
I discovered few things in the summarizeGjester() function. First of all I moved all the Javascript code in the bursdagskalkulator.js file inside the summarizeGjester() function. Also I converted var antallGjester to integer using parseInt() function, because it was treated as string before.
var antallGjester = document.getElementById("gjesterAntallInput").value;
antallGjester = parseInt(antallGjester); //integer conversion
Also the first Boolean comparison was changed to
if ((antallGjester < 10) && (antallGjester > 0)), so that the second one would work if there’s 0 value: else if (antallGjester === 0).
function summarizeGjester() {
var antallGjester = document.getElementById("gjesterAntallInput").value;
antallGjester = parseInt(antallGjester);
var fastPris = 1500;
var fastPrisDifferanse = 10;
var gjestePris = 120;
var gjesteDifferanse = antallGjester - fastPrisDifferanse;
var gjesteSum = gjestePris * gjesteDifferanse;
var gjesterTotalt = 0;
if ((antallGjester < 10) && (antallGjester > 0)) {
console.log("antallGjester < 10");
gjesterTotalt = 1500;
} else if (antallGjester === 0) {
console.log("antallGjester === 0");
gjesterTotalt = 0;
} else {
console.log("else");
gjesterTotalt = fastPris + gjesteSum;
}
document.querySelector('#results').innerHTML = gjesterTotalt;
}
<form>
<div class="form-group">
<label for="gjesterAntall">Antall barn:</label>
<input type="number" class="form-control" id="gjesterAntallInput">
</div>
<button class="btn btn-lg btn-warning" onclick="summarizeGjester()" type="button" id="sumGjester">Legg sammen</button>
</form>
<h1 class="text-center" style="font-size:80px;"><strong><span id="results">0</span>,-</h1>
I hope this helps :-)
HTML
<input type="number" id="inputField" ClientIDMode="static">
<button onclick="changeTheVariable()" type="button" id="pushMe"></button>
Javascript
var a = 0;
function changeTheVariable() {
a = document.getElementById('inputField').value;
alert(a);
}
Use Static ClientIDMode for stable id and access after page rendering
PlaceHolders canh change childe's id
I suppose this will work for you
var a = 0;
function changeTheVariable() {
a = document.getElementById("inputField").value || a;
document.getElementById("result").innerText = parseFloat(a);
}
<input type="number" id="inputField">
<button onclick="changeTheVariable()" type="button" id="pushMe">Click me</button>
<div>Result: <span id="result"></span></div>
Edited:
The reason behind this code is not running in jsfiddle is here.
After making the changeTheVariable() global variable this code will work in jsfiddle also. Here https://jsfiddle.net/1b9cfmje/
Use the following javascript code:
window.onload = function(){ var a = 0; window.changeTheVariable = function() { a = document.getElementById("inputField").value || a; document.getElementById("result").innerText = parseFloat(a); }}

A function that is not a function?

I'm still new to coding and I'm trying to make a cookie clicker type game. I get
upgradecursor is not a function
when I run it on Chrome. I don't really understand the problem as I have a function called upgradecursor.
Pls help! :(
<!DOCTYPE html>
<html>
<head>
<title> Test </title>
<script>
//List of variables
var cookie = 0;
var cursor = 1;
var cursorupgradecost = 10;
function addcookie(){
var textField = document.getElementById( "textField" );
var currentValue = parseInt(textField.value);
cookie = cookie + cursor;
// Add one
currentValue = currentValue + cursor;
// Put it back with the new +1'd value
textField.value = currentValue;}
function upgradecursor(){
var textField = document.getElementById( "textField" );
var currentValue = parseInt(textField.value);
cookie = cookie - cursorupgradecost;
// Minus one
currentValue = currentValue - cursorupgradecost;
// Put it back with the new -10'd value
textField.value = currentValue;
//change the cost of the upgrade
cursorupgradecost = cursorupgradecost * 1.5;
//Upgrade the cursor
cursor = cursor + 1;
}
</script>
</head>
<body>
<script>
if (cursorupgradecost > cookie){
upgradecursor = false;}
else{
upgradecursor = true;}
</script>
<button type ="button" onClick = "upgradecursor()"/>Upgrade Cursor </button>
<input type="text" value="0" disabled name="lvl">
<br>
<button type="button" onClick="addcookie()"/>Add Cookie</button>
<input type="button" value="Cookies" disabled name="clicker">
<input type="text" value="0" id="textField" readonly/>
</body>
</html>
You are overwriting upgradecursor with a global variable after you include the JavaScript.
<script>
if (cursorupgradecost > cookie) {
upgradecursor = false;
} else {
upgradecursor = true;
}
</script>
This is the offending code. You need to rename this variable to something else to avoid overwriting the function.
Additionally, you should definitely avoid declaring global variables like this and look at making your code more encapsulated/modular.
--
Update based on your objective: If you want to only upgrade the cursor given a certain use case, then it might be useful to have a specific click handler that will run this check inside itself before calling upgradecursor. For example: -
function onCursorClick() {
if (cursorCost > cookie) {
// do something
} else {
upgradeCursor();
}
}
Notice how I have used camel casing to declare my functions and variables? Make sure you update your variable declarations to match my casing. This is common practice. You can read more on coding conventions here: W3Schools JavaScript Style Guide
I'd like to point out listeners should be attached via JavaScript (see DOM Event Listeners), but make sure you update the click handler to match our update, like so: -
<button type="button" onClick="onCursorClick()"/>Upgrade Cursor</button>
You have this:
if (cursorupgradecost > cookie){
upgradecursor = false;}
else{
upgradecursor = true;}
So while you started out by defining upgradecursor as a function, you overwrote it with a boolean before you ever called it.
The problem is here:
<script>
if (cursorupgradecost > cookie){
upgradecursor = false;}
else{
upgradecursor = true;}
</script>
What on earth is that supposed to even do?
Remove it and it should work.

how to use id of a button in if statement using javascript

I am a beginner to Javascript and am trying to perform arithmetic functions.
Here is my code below:
script
<script language="javascript" type="text/javascript">
function func(a,b)
{
var a = document.getElementById("a");
var b = document.getElementById("b");
if (document.getElementById("btnadd").Text == 'Add')
{
var c = a + b;
document.getElementById("rslt").innerHTML =c;
}
}
</script>
aspx
<asp:Button ID="btnadd" Text="Add" runat="server" OnClientClick="func(txtn1,txtn2)" />
<p id="rslt"></p>
My idea is, when I click say 'add' button the value of two textbox should be passed to the script and are assigned to two variables.
With those two variables all arithmetic (add,sub,div,mul) should be done.
What you could do is also pass the button that was clicked, using this. That way you know the text of the button that was clicked. And since you are using a server side button, be sure to include return false; from your JavaScript call to prevent it from posting back and clearing your <p> tag.
<asp:Button ID="btnadd" runat="server" Text="Add"
OnClientClick="func('txtn1', 'txtn2', this); return false;" />
function func(a, b, btn) {
var txtn1 = document.getElementById(a);
var txtn2 = document.getElementById(b);
var rslt = document.getElementById('rslt');
if(btn.value == 'Add')
rslt.innerHTML = parseInt(txtn1.value) + parseInt(txtn2.value);
}
According to here:
You have to use anonymous functions/handlers to react on such user-interactions without reloading the page. Also look at jquery (http://api.jquery.com/click/) which gives you a simpler api to write those things.
<script language="javascript" type="text/javascript">
function func(a,b) {
var a = document.getElementById("a");
var b = document.getElementById("b");
var btn = document.getElementsById("btnadd");
btn.onclick = function() {
var c = a + b;
// alert("Result = " + c );
document.getElementById("rslt").innerHTML =c;
}
}
</script>
Hope that your requirement is to perform arithmetic operations with two numbers from the text boxes.For that you need not pass text boxes as parameters to the script since it uses document.getElementById. directly access the textbox inside the script as follows:
<head><script>
function myFunction(a) {
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
var x;
if(a==1)
x = +y + +z;
else if(a==2)
x=+y - +z;
else
x=0;
document.getElementById("demo").innerHTML = x;
}
</script></head>
<body>
<p>Click the button to calculate x.</p>
<br/>
<br/>Enter first number:
<input type="text" id="txt1" name="text1">Enter second number:
<input type="text" id="txt2" name="text2">
<button onclick="myFunction(1)">Addition</button>
<button onclick="myFunction(2)">Subtraction</button>
<p id="demo"></p>
</body>
The above code will perform addition and subtraction based on button click
function func(a,b) {
var a,b;
a=$("#a").val();
b=$("#b").val();
if ($("#btnAdd").val() == 'Add') {
$("#a").val(+(a) + +(b));
}
}
And Set button value to Add
Or if you want to reduce your code then use this code
if ($("#btnAdd").val() == 'Add') {
$("#a").val( +($("#a").val()) + +($("#b").val() ));
}

Categories