<HTML>
<HEAD>
<TITLE>counter </TITLE>
</head>
<body>
<script type="text/javascript">
var clicks = 0;
function linkClick(){
document.getElementById('clicked').value = ++clicks;
}
document.write('Add');
</script>
<input id="clicked" size="3" onfocus="this.blur();" value="0" >
<script type="text/javascript">
function linkClick1(){
document.getElementById('clicked').value = --clicks;
}
document.write('Subtract');
</script>
</BODY>
</HTML>
This on adds and subtracts depending on how many times its clicked i want the value not to go below 0 how to do it??
Replace:
document.getElementById('clicked').value = ++clicks;
on:
document.getElementById('clicked').value = clicks >= 0? --clicks : clicks;
This might work, if it doesn't add a comment :)
This is a more practical:
function linkClick1(){
if (clicks > 0) {
document.getElementById('clicked').value = --clicks;
}
}
function linkClick1(){
if (clicks > 0) {
document.getElementById('clicked').value = --clicks;
}
}
Related
Using ng-submit I have a form submission callback namely submitFN. Have 2 buttons:
Fund my startup!
Reset
My desirable output is on clicking the reset button, the input field gets 0. And on clicking "Fund my startUp" it shows an alert. How to attain this?
Problem:
Both the buttons are triggering the submitFN. Unable to reset.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js">
</script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('startUpController', function($scope) {
$scope.funding = {
startingEstimate: 0
};
$scope.calculate = function () {
$scope.funding.needed = $scope.funding.startingEstimate * 10;
};
$scope.submitFN = function () {
window.alert('Go and find more customers.')
}
$scope.resetFN = function () {
$scope.startingEstimate = 0;
}
});
</script>
</head>
<body>
<div ng-app='mainApp'>
<form ng-submit="submitFN()" ng-controller="startUpController">
Starting: <input type="text" ng-change="calculate()" ng-model="funding.startingEstimate"/>
Recommended: {{funding.needed}}
<button>Fund my startup!</button>
<button ng-click="resetFN()">Reset</button>
</form>
</div>
</body>
</html>
I am entirely novice in angularJS and any help is highly appreciable. Thanks in advance.
UPDATE
One of code I tried:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js">
</script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('startUpController', function($scope) {
$scope.funding = {
startingEstimate: 0
};
$scope.calculate = function () {
$scope.funding.needed = $scope.funding.startingEstimate * 10;
};
$scope.submitFN = function () {
window.alert('Go and find more customers.')
}
$scope.resetFN = function () {
$scope.startingEstimate = 0;
}
});
</script>
</head>
<body>
<div ng-app='mainApp'>
<form ng-submit="submitFN()" ng-controller="startUpController">
Starting: <input type="text" ng-change="calculate()" ng-model="funding.startingEstimate"/>
Recommended: {{funding.needed}}
<button>Fund my startup!</button>
<button type = "button" ng-click="resetFN()">Reset</button>
</form>
</div>
</body>
</html>
By default the button type is submit, so you the 2nd button also has button type submit. If you don't want to submit a form on that button, you should explicitly make that button type as a button
type="button"
Also you had mistake in resetFN code, It should be modify a value which is assigned to ng-model
$scope.resetFN = function () {
$scope.funding.startingEstimate = 0;
}
corrected code below:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js">
</script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('startUpController', function($scope) {
$scope.funding = {
startingEstimate: 0
};
$scope.calculate = function () {
$scope.funding.needed = $scope.funding.startingEstimate * 10;
};
$scope.submitFN = function () {
window.alert('Go and find more customers.')
}
$scope.resetFN = function () {
$scope.funding.startingEstimate = 0;
}
});
</script>
</head>
<body>
<div ng-app='mainApp'>
<form ng-submit="submitFN()" ng-controller="startUpController">
Starting: <input type="text" ng-change="calculate()" ng-model="funding.startingEstimate"/>
Recommended: {{funding.needed}}
<button>Fund my startup!</button>
<button type="button" ng-click="resetFN()">Reset</button>
</form>
</div>
</body>
</html>
You miss funding
$scope.resetFN = function () {
$scope.funding.startingEstimate = 0;
}
I really hope that you can help me. I have a simple jQuery character count script, that counts down when a user enters a character into a text field. However now I need to customize it in two ways:
1.) I need to add a checkbox. When this checkbox is checked the character count has to be recuded by a certain amount e.g. 10 characters.
2.) The character count currently only shows when I start entering the first character, however I want the character count to show when the page loads.
If you have any questions please let me know.
Below you can find my code:
function countChar(val) {
var len = val.value.length;
if (len >= 500)
val.value = val.value.substring(0, 500);
else
$('#charNum').text(500 - len);
};
<textarea id="field" onkeyup="countChar(this)"></textarea>
<div id="charNum"></div>
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script>
//Sorry for making too many functions, well you also use other approches as well.
var len;
//for initiliase the count text value on page
function init(){
$("#charNum").text(500)
}
//for keyup and checkbox
function countChar() {
len = $("#field").val().length;
if (len >= 500) {
val.value = val.value.substring(0, 500);
}
if($("#idk").is(":checked"))
{
$("#charNum").text(500-($("#field").val().length +10));
}
else {
$('#charNum').text(500 - len);
}
}
</script>
</head>
<body onload="init();">
<textarea id="field" onkeyup="countChar()"></textarea>
<input type="checkbox" name="chk" id="idk" onchange="countChar()" />
<div id="charNum"></div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script>
//Sorry for making too many functions, well you also use other approches as well.
var len;
//for initiliase the count text value on page
function init() {
$("#charNum").text(500)
}
//for keyup
function countChar() {
len = $("#field").val().length;
if (len >= 500) {
val.value = val.value.substring(0, 500);
}
if ($("#idk").is(":checked")) {
$("#charNum").text(500 - ($("#field").val().length + 10));
} else {
$('#charNum').text(500 - len);
}
}
</script>
</head>
<body onload="init();">
<textarea id="field" onkeyup="countChar()"></textarea>
<input type="checkbox" name="chk" id="idk" onchange="countChar()" />
<div id="charNum"></div>
</body>
</html>
All of this code here works perfectly fine, I just want to make it more easy for the user by allowing him/her to just hit the Enter to execute the function, instead of having to click the div activating the moneyFunction().
Heres my code:
<!DOCTYPE html>
<html>
<head>
<title> YearlyDough </title>
<link type="text/css" rel="stylesheet" href="money.css">
</head>
<body>
<p id="header"> Enter yearly income </p>
<input type="text" id="textmoney">
<div onclick="moneyFunction()" id="moneydiv"> <p id="divtext">Calculate</p> </div>
<p id="demo"></p>
<p id="liar"></p>
<div onclick="reloadFunction()" id="reload"> Redo </div>
About
<script>
function moneyFunction() {
var money = document.getElementById('textmoney').value;
var dailyE = money/365;
document.getElementById('demo').innerHTML = ("$" + dailyE + " " + "per day");
if ( document.getElementById('textmoney').value == 0) {
document.getElementById('demo').innerHTML = "ERROR";
}
if ( document.getElementById('textmoney').value > 100000000000) {
document.getElementById('liar').innerHTML = "I know you aint make that much.";
} else {
document.getElementById('liar').innerHTML = "";
}
}
function reloadFunction() {
location.reload();
}
</script>
</body>
</html>
var inp = document.getElementById("textmoney");
inp.addEventListener("keydown", function (e) {
if (e.keyCode === 13) { //checks whether the pressed key is "Enter"
moneyFunction();
}
});
$('.div').click()
Inside your keydown event will call the onclick if you have jquery included on the page.
School project. I must design a page that contains an input box, a button that sends the entered number to the function, and a paragraph that displays the result. Here's my progress as of now, problem is it just says "false" everytime. Sorry for the triviality of the question, i'm a total newb with web coding.
<!DOCTYPE html>
<html>
<head>
<script>
function isPrime($n)
{
$i=2;
if ($n==2){
return true;
}
$sqrtN = sqrt($n);
while ($i<= $sqrtN){
if ($n % $i ==0){
return false;
}
$i++;
}
return true;
}
</script>
</head>
<body>
Value: <input type="number" id="n"><br>
<input type="submit" value="Send" onclick="isPrime(n)">
</form>
<p id="derp">sdvfsdg</p>
<script>
document.getElementById("derp").innerHTML = isPrime(n);
</script>
</body>
</html>
Basically you are setting the content of the derp once and for all before pressing the button
function isPrime($n)
{
$i=2;
if ($n==2){
document.getElementById("derp").innerHTML = "True";
}
$sqrtN = sqrt($n);
while ($i<= $sqrtN){
if ($n % $i ==0){
document.getElementById("derp").innerHTML = "False";
}
$i++;
}
document.getElementById("derp").innerHTML = "True";
}
And not sure you really need the $ everywhere - that's a PHP thing
You had not used input field value at all, that was your mistake
Value:
<input type="number" id="n">
<br>
<input type="submit" value="Sebd" onclick="x()">
</form>
<p id="derp">sdvfsdg</p>
<div id="try">jdfs</div>
<script>
function x() {
document.getElementById('derp').innerHTML = isPrime(Number(document.getElementById('n').value));
}
function isPrime(n) {
i = 2;
if (n == 2) {
return true;
}
sqrtN = Math.sqrt(n);
document.getElementById('try').innerHTML = n;
while (i <= sqrtN) {
document.getElementById('try').innerHTML = 'try';
if (n % i == 0) {
return false;
}
i++;
}
return true;
}
</script>
Here's the code that'll work for your case... You should execute the code on click AFTER entering the value
<!DOCTYPE html>
<html>
<head>
<script>
</script>
</head>
<body>
Value: <input type="number" id="n"><br>
<input type="submit" value="Send" onclick="checkPrime()"> <!--use function on click-->
</form>
<p id="derp">sdvfsdg</p>
<script>
function isPrime(num)
{
var isPrime = true; //initially set to true
for(var i=2; i<num; i++){
if(num%i == 0){ //if the num gets divide by any other number except itself
isPrime = false;
}
}
return isPrime;
}
function checkPrime(){ //function that gets called on send button click
var number = document.getElementById("n").value; //get the value of input
number = parseInt(number); //since it's a string,convert it into number
document.getElementById("derp").innerHTML = isPrime(number); //check if prime and display result
}
</script>
</body>
</html>
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;
function timedCount()
{
document.getElementById('txt').value=c;
if(c == 100) return;
c=c+1;
t=setTimeout("timedCount()",30);
}
function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
</script>
</head>
<body onload="doTimer()">
<form>
<input type="button" value="Start count!">
<input type="text" id="txt">
</form>
<p>Click on the button above. The input field will count forever, starting at 0.</p>
</body>
</html>
I want to change
<input type="text" id="txt">
into
<div type="text" id="txt">
It doesn't work.
I think the problem is
document.getElementById('txt').value=c;
But I tried
document.getElementById('txt').innerHTML=c;
It still doesn't work.
Could someone tell me why?
Cheers!!!
Setting the value of the textbox is going to populate the text in the textbox. If you want to replace an input with a div you should use:
element.replaceChild(newDiv, oldTextbox);
Try:
var div = document.createElement("DIV");
div.id = "txt";
div.innerText = "Hello world!";
var tb = document.getElementById("txt");
tb.parentElement.replaceChild(div, tb);
Try changing <div type="text" id="txt"> to <div id="txt">
Basically, you're asking about doing this:
var d = document.createNode("div")
d.setAttribute("id", "txt")
d.setAttribute("type", "text");
var input = document.getElementById( "txt" );
input.parentElement.replaceChild( d, input );
But I think you're better off:
function timedCount()
{
document.getElementById('txt').value=c;
if(c == 100) return;
c=c+1;
t=setTimeout("timedCount()",30);
}
function doTimer()
{
if (!timer_is_on)
{
// set the input to readOnly, this allows JS to update it without
// letting the user modify the value.
document.getElementById('txt').readOnly = true
timer_is_on=1;
timedCount();
}
}