It's a beginner project for me to learn HTML and JavaScript. Every other buttons work fine, only a dot button. Possible problem I think is that the resultado.value does not accept a decimal character and only accept numerical numbers. The resultado variable is declared in JavaScript as
var resultado = document.getElementById('ent')
This is part code in HTML that declare other numerical button and decimal button:
<p><input type="button" id="n1" class="keys" value="1" onclick="add1()"> <input type="button" id="n2" class="keys" value="2" onclick="add2()"> <input type="button" id="n3" class="keys" value="3" onclick="add3()"> </p>
<p><input type="button" id="n4" class="keys" value="4" onclick="add4()"> <input type="button" id="n5" class="keys" value="5" onclick="add5()"> <input type="button" id="n6" class="keys" value="6" onclick="add6()"> </p>
<p><input type="button" id="n7" class="keys" value="7" onclick="add7()"> <input type="button" id="n8" class="keys" value="8" onclick="add8()"> <input type="button" id="n9" class="keys" value="9" onclick="add9()"> </p>
For decimal button
<p><input type="button" id="pon" class="keys" value="." onclick="ponto()">
This is part code in JavaScript for the numerical button and decimal button:
function add1() {
resultado.value += `1`
}
function add2() {
resultado.value += `2`
For decimal button but won't work
function ponto(){
resultado.value += `.`
}
Any ideas how to add display button on display ? Thank you! Any suggestion to improve my question is appreciated also. First time asking. Thanks!
Related
To simplify I have a basic HTML structure where inside an I have one number input and it's respective add and subtracts buttons. Every time one of the buttons it's clicked the page automatically reloads. How do I prevent that from happening?
This is my code:
<form>
...
<button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" class="icon-number ver"></button>
<input class="quantity" min="0" max="99" name="quantity" value="1" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus icon-number ver"></button>
<button class="btn-form btn-add-cart" type="submit">ADD TO CART</button>
</form>
The issue disappears when I remove the form tag, but I would like to keep it.
I am not using any javascript on this code, it's just HTML.
It may be submitting the form after you click the button.
I tried your code at my local machine and could fix it using attribute type like this.
<button type="button" onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus icon-number ver"></button>
Make sure your functions are returning false
<form>
...
<button onclick="this.parentNode.querySelector('input[type=number]').stepDown(); return false;" class="icon-number ver"></button>
<input class="quantity" min="0" max="99" name="quantity" value="1" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp(); return false;" class="plus icon-number ver"></button>
<button class="btn-form btn-add-cart" type="submit">ADD TO CART</button>
</form>
So I am setting up a virtual keyboard with the following keys and input and a master button with a dynamic onclick function. I want to be able to push the enter key and hit that master button, but for some reason it wont work. When I hit the enter key, it will click the last button that I pressed
I tried using this function
input.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById("MasterButton").click();
}
});
but it did not work. The system recognizes the keystroke, but it might also be just the default.
<div id="VirtualKey" style="float:left">
<input id="btn1" type="button" onclick="input(this);" class="keypad" value="1" />
<input id="btn2" type="button" onclick="input(this);" class="keypad" value="2" />
<input id="btn3" type="button" onclick="input(this);" class="keypad" value="3" />
<br />
<input id="btn4" type="button" onclick="input(this);" class="keypad" value="4" />
<input id="btn5" type="button" onclick="input(this);" class="keypad" value="5" />
<input id="btn6" type="button" onclick="input(this);" class="keypad" value="6" />
<br />
<input id="btn7" type="button" onclick="input(this);" class="keypad" value="7" />
<input id="btn8" type="button" onclick="input(this);" class="keypad" value="8" />
<input id="btn9" type="button" onclick="input(this);" class="keypad" value="9" />
<br />
<input id="btn0" type="button" onclick="input(this);" class="keypad" value="0" />
<input id="btn." type="button" onclick="input(this);" class="keypad" value="." />
<input id="btnDel" type="button" value="DEL" onclick="del();" class="keypad"></button>
</div>
<div id="Master Input Section"><br><input type="number" step="0.1" id="Student"></input>
<div id="Master Button Section"><br><button type="submit" id="MasterButton" class="button" onclick="">Master</button></div>
<script>
function input(e) {
// Get the TextBox object.
var tbInput = document.getElementById("Student");
// As e is the button, its value is the text on it.
// Add the value to the TextBox.
tbInput.value = tbInput.value + e.value;
}
function del() {
// Get the TextBox object.
var tbInput = document.getElementById("Student");
// Remove the last char in the TextBox.
tbInput.value = tbInput.value.substr(0, tbInput.value.length - 1);
}
</script>
Expected Results, enter key will click MasterButton
Update found error code TypeError: input.addEventListener is not a function[Learn More]
var ENTER_KEY = 13;
$(document).on('keypress', function(e) {
var code = e.keyCode || e.which
if (code == ENTER_KEY) {
$("#MasterButton").trigger("click");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have not tried using this method before hence this was weird. I scoured most a good portion of the net trying to find a way to get this to work, but thankfully I found it on another post
<input type="number" step="0.1" id="Student" onkeydown="if (event.keyCode == 13)
document.getElementById('MasterButton').click()"></input>
Hope this helps someone in the near future. but this does bind the enter key on that input field to the MasterButton. Note that I only had one input field, and only 1 button that works dynamically with other sections of the code
I'd like to give three choices which are represented by words but are going to POST numbers:
<form method="POST">
{% csrf_token %}
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="radio" name="intensity" id="Low" value=1 autocomplete="off"> Pale
</label>
<label class="btn btn-secondary">
<input type="radio" name="intensity" id="Medium" value=5 autocomplete="off"> Medium
</label>
<label class="btn btn-secondary">
<input type="radio" name="intensity" id="High" value=9 autocomplete="off"> Deep
</label>
</div>
</form>
But then in my view request.POST.get('intensity') is a string. Do I need to manually convert it or there's something I'm missing?
ps. I'm not using Django forms and I don't want to use it at the moment.
No. HTTP only deals with strings and the value of the string is left for the server to decide. You can convert the value using int() function in python.
Reference:
How to get int instead string from form?
This question already has answers here:
<input type="number"/> is not showing a number keypad on iOS
(6 answers)
Closed 8 months ago.
When I set my input field type="time" or type="date" on my webapp, if I view the app in mobile device, I get nice UI such as the following when clicked on it
.
However, when I set type="number", I was expecting a number pad to pop up. However, I get a keyboard instead. If I set it to type="tel", would it cause a problem or is there a better solution?
The Number Input is another way to offer numbers for your users. The difference between the number input and the tel input is that also offers easy access to special characters and symbols. However, if you only need numbers entered, it’s best to stick with the tel input.
<label class="item item-input">
<span class="input-label">Number</span>
<input type="number">
</label>
The Tel Input is a very unknown and underused input type. It displays a full numeric keypad, which makes for a great user experience when all that is required from the user is numbers. Take advantage of this one!
<label class="item item-input">
<span class="input-label">Telephone</span>
<input type="tel">
</label>
For more information, read this article: http://ionicframework.com/html5-input-types/#number
Try something like this:
<input type="number" min="0" inputmode="numeric" pattern="[0-9]*" />
if you want to input a number then input type="number" is there. But if u dont want to see mobile keypad then u can make your own keypad like this:
<html>
<head><title></title></head>
<body>
<script> function $(id) { return document.getElementById(id); } </script>
<input id="num" type="text" readonly="true"/>
<input type="button" value="..." onclick="$('keypad').style.display='inline-block';"/>
<div id="keypad" style="display:none; background:#AAA; vertical-align:top;">
<input type="button" value="7" onclick="$('num').value+=7;"/>
<input type="button" value="8" onclick="$('num').value+=8;"/>
<input type="button" value="9" onclick="$('num').value+=9;"/><br/>
<input type="button" value="4" onclick="$('num').value+=4;"/>
<input type="button" value="5" onclick="$('num').value+=5;"/>
<input type="button" value="6" onclick="$('num').value+=6;"/><br/>
<input type="button" value="1" onclick="$('num').value+=1;"/>
<input type="button" value="2" onclick="$('num').value+=2;"/>
<input type="button" value="3" onclick="$('num').value+=3;"/><br/>
<input type="button" value="X" onclick="$('keypad').style.display='none'"/>
<input type="button" value="0" onclick="$('num').value+=0;"/>
<input type="button" value="←" onclick="$('num').value=$('num').value.substr(0,$('num').value.length-1);"/>
</div>
</body>
</html>
I have a button group in which I have tree inputs of type radio.
The reason I use these, is that in order to get the style template I have bought for my project working I must use the exact same elements.
The button group is controlling the size on a dynamic table, and I need an event fired when a button (input) is pressed
<div class="btn-group" data-toggle="buttons" (click)="pageSizechanged($event)" >
<label class="btn btn-success">
<input type="radio" name="options"> 10
</label>
<label class="btn btn-success">
<input type="radio" name="options"> 20
</label>
<label class="btn btn-success active">
<input type="radio" > 30
</label>
</div>
I am using Angular 2 so I have tried to bind the inputs with values (not shown) without luck...
Update
The answer marked as solved below only partially solved my problem as I could only press each input once. To solve this I did the following:
<div class="btn-group">
<label class="btn btn-success">
<input type="radio" style="display:none" value="10" (change)="pageSizechanged($event.target)" > 10
</label>
<label class="btn btn-success">
<input type="radio" style="display:none" value="20" (change)="pageSizechanged($event.target)"> 20
</label>
<label class="btn btn-success">
<input type="radio" value="30" style="display:none" (change)="pageSizechanged($event.target)"> 30
</label>
</div>
In the change event i pass the target along. I do this because i want to set checked to false:
pageSizechanged(target) {
this._pagesize = target.value;
target.checked = false;
...
}
Otherwise the inputs will remain checked and the change event will therefore not be fired. If someone have a better way to do this, please share :)
Not entirelly sure what you want to achieve, but if I understood correctly.
You can bind the radio buttons with ngModel and avoid the current click-events entirelly, and rather react to changes. The following template works, just define your tableSize variable in the component class.
<div class="btn-group">
<label class="btn btn-success">
<input type="radio" name="options" [(ngModel)]="tableSize" value="10"> 10
</label>
<label class="btn btn-success">
<input type="radio" name="options" [(ngModel)]="tableSize" value="20"> 20
</label>
<label class="btn btn-success active" >
<input type="radio" [(ngModel)]="tableSize" value="30"> 30
</label>
</div>
Current tableSize: {{tableSize}}
If you need an event, you can add a (change)="myFunc($event.target.value)" to the input tags as well.
I don't think radio inputs are currently well supported in angular2. (you seem to have to make your own component).
I have used them with a simple event handler on the (click) event, like so:
<label class="chart__controls__item" *ngFor="let choice of ['competitor','taxonomy']">
<input type="radio"
name="options"
(click)="selectedChoice = choice"
[checked]="choice === selectedChoice" >
No
</label>
<label>
<input type="radio"
name="options"
[checked]="choice === selectedChoice"
(click)="selectedChoice = choice >
Yes
</label>
So if we initialise with selectedChoice='Yes', the second radio button will be selected. The [checked] attribute makes sure the selected radio button is checked and the (click) directive triggers the model change.