http://plnkr.co/edit/v53QDV8604OwGc6VdVYw?p=preview
I have a very basic doubt which i am not able to figure out how to solve it. If you see the input field 'negative'- i have to take negative values from user.
User might enter '-34.45' , '-455' and so on. But if user enters '56' and goes to next input field, i want the entered field to update as '-56'
So i need to check first if negative sign is not there and then only add a negative sign. Any suggestions ?>
<html>
</html>
Get the number, check if it is under zero, if not, subtract from zero. Assign it back.
https://jsfiddle.net/subterrane/pnrmxhsv/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway:400,300,600">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
</head>
<body>
<div class="container">
<div>
<label for="num">Negative</label>
<input type="text" placeholder="-52" id="num">
</div>
</div>
<script>
document.querySelector('#num').addEventListener('change', function(e) {
var num = e.target.value;
num = parseFloat(num, 10);
if(!isNaN(num) && num > 0) num = 0 - num;
e.target.value = num;
})
</script>
</body>
</html>
omg, i cant believe i will be able to answer my own question. it works perfectly fine for me. here is the code i tried and it worked well.
$scope.$watch(function ($scope) {
if ($scope.params.speed != undefined && $scope.params.speed > 0) {
$scope.params.speed = $scope.params.speed - (2 * $scope.params.speed );
};
})
Related
I am a beginner javascript programmer. I made a very simple javascript number guessing game between 1 and 10. But it is not working. Could anybody take a look at this code and tell me what is wrong in this code.
// getting the value of a textbox
let guess=document.getElementById('text').value;
let GuessNumber=3;
// creating a function to check whether the userinput and the variable is same on the click of a button.
document.getElementById("submit").onclick=()=>{
// if the user input and the number is same just display gift
if(guess==GuessNumber){
document.getElementById("P").innerHTML="Gift";
}
// if the user input is not a number display 'it should be a number'
else if(isNaN(guess)){
document.getElementById("P").innerHTML="It should be a number";
}
// if the user input is a number greater than 10 or less than 1 display 'it is a number between 1 and 10.
else if(guess>11||guess<0){
document.getElementById("P").innerHTML="It is a number between 1 and 10. Not beyond 10 or below"
}
// or if it is not same as the guess number display 'better luck next time'
else{
document.getElementById("P").innerHTML="Better luck next time";
}
}
The problem here is ,these else if statement and if statement is not working. No matter what the input is it is just displaying better luck next time. here the guessing number is 3 and whenever i enter 3 then also it is displaying better luck next time. If it is not a number, then also it is displaying like this. What is wrong here. Could anybody please help.
The html of this code is here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body align="center">
<h1>Number Guessing Game</h1>
<h2>Guess a number between 1 and 10</h2>
<h2>If your guess is correct we will give you a gift :)
</h2>
<input id="text" type="text" placeholder="Guess">
<br><br>
<button id="submit">submit</button><br><br>
<p id="P"></p>
<script src="index.js"></script>
</body>
</html>
Your code doesn't work because you store input value outside the event listener so the result will always empty, instead you can create a variable with input and into the event create a const with value
let GuessNumber = 3;
let guess = document.getElementById('text'); // <-- assign input
document.getElementById("submit").onclick = () => {
const value = guess.value; // <-- take value
if (value == GuessNumber) {
document.getElementById("P").innerHTML = "Gift";
} else if (isNaN(value)) {
document.getElementById("P").innerHTML = "It should be a number";
} else if (value > 11 || value < 0) {
document.getElementById("P").innerHTML = "It is a number between 1 and 10. Not beyond 10 or below"
} else {
document.getElementById("P").innerHTML = "Better luck next time";
}
}
<h1>Number Guessing Game</h1>
<h2>Guess a number between 1 and 10</h2>
<h2>If your guess is correct we will give you a gift :)
</h2>
<input id="text" type="text" placeholder="Guess">
<br><br>
<button id="submit">submit</button><br><br>
<p id="P"></p>
The only problem with your code was, that you declared the variable let guessNumber & let guess
outside of the onClick action check the code below rest other code seems to be working fine
// creating a function to check whether the userinput and the variable is same on the click of a button.
document.getElementById("submit").onclick=()=>{
// getting the value of a textbox
let guess=document.getElementById('text').value;
let GuessNumber=5;
// if the user input and the number is same just display gift
if(guess==GuessNumber){
document.getElementById("P").innerHTML="Gift";
}
// if the user input is not a number display 'it should be a number'
else if(isNaN(guess)){
document.getElementById("P").innerHTML="It should be a number";
}
// if the user input is a number greater than 10 or less than 1 display 'it is a number between 1 and 10.
else if(guess>11||guess<0){
document.getElementById("P").innerHTML="It is a number between 1 and 10. Not beyond 10 or below"
}
// or if it is not same as the guess number display 'better luck next time'
else{
document.getElementById("P").innerHTML="Better luck next time";
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body align="center">
<h1>Number Guessing Game</h1>
<h2>Guess a number between 1 and 10</h2>
<h2>If your guess is correct we will give you a gift :)
</h2>
<input id="text" type="text" placeholder="Guess">
<br><br>
<button id="submit">submit</button><br><br>
<p id="P"></p>
<script src="index.js"></script>
</body>
</html>
You only needed to define the guess inside the onclick event. Why this happens. This is because in your code the guess already gets a empty value when you first load the page and this value doesnt change when you click the button. So you need to define this variable inside the onclick event for this to work
// getting the value of a textbox
let GuessNumber=3;
// creating a function to check whether the userinput and the variable is same on the click of a button.
document.getElementById("submit").onclick=()=>{
let guess=document.getElementById('text').value;
// if the user input and the number is same just display gift
if(guess==GuessNumber){
document.getElementById("P").innerHTML="Gift";
}
// if the user input is not a number display 'it should be a number'
else if(isNaN(guess)){
document.getElementById("P").innerHTML="It should be a number";
}
// if the user input is a number greater than 10 or less than 1 display 'it is a number between 1 and 10.
else if(guess>11||guess<0){
document.getElementById("P").innerHTML="It is a number between 1 and 10. Not beyond 10 or below"
}
// or if it is not same as the guess number display 'better luck next time'
else{
document.getElementById("P").innerHTML="Better luck next time";
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body align="center">
<h1>Number Guessing Game</h1>
<h2>Guess a number between 1 and 10</h2>
<h2>If your guess is correct we will give you a gift :)
</h2>
<input id="text" type="text" placeholder="Guess">
<br><br>
<button id="submit">submit</button><br><br>
<p id="P"></p>
<script src="index.js"></script>
</body>
</html>
Think in order of execution of the statement prospective. By the time document.click() event is happened variable "guess" is already stored in memory with empty value as it is the first statement to execute by the js engine. So you are always checking GuessNumber (3) with guess ("").
I am new to JavaScript for context.
I want to have a web page where the user has a base number, which is an input and can have unlimited subtractors, or "sources", that will bring the number down. It's like the user is listing all of his or her sources to pay for something expensive. Each source will have a name and a range, which goes from -100 to 100.
The problem with it is that it takes every change in input as a potential source, but I want only the value of the ranges to be sourced. In other words, if the user has added five ranges, then I only want there to be five subtractors/sources.
Is there anything I could do to make this change happen? It also may be helpful to know that when I change the event listener to 'mouseDown' the same thing happens.
Here is everything I have written.
const addBtn = document.querySelector(".solvePlusLogo")
function addSolvr() {
solvContain = document.querySelector('.solveContainer')
const solvDiv= document.createElement('div');
solvContain.appendChild(solvDiv);
const solvLabel = document.createElement('input');
solvDiv.appendChild(solvLabel);
const solvRange = document.createElement('input');
solvRange.type = "range";
solvRange.className = "range"
solvDiv.appendChild(solvRange);
}
addBtn.addEventListener('click', addSolvr)
let full = document.querySelector("#numInput").value
document.addEventListener('input', function(event) {
if(event.target.matches(".range")) {
const subtractors = []
subtractors.push(event.target.value)
for(let x of subtractors) {
full -= x
}
document.querySelector("#numDisplay").innerHTML = full
}
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input type="number" id="numInput">
<h3 id="numDisplay">
$0
</h3>
<div class="solveContainer" style="font-family: 'IBM Plex Mono', momnospace;">
<div class="solveIntro">
<button class="solvePlusLogo">Add Source
</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Every time the range changes, you're subtracting its current value from full. But full has previously had a different range value subtracting, so these subtractions are accumulating.
You need to get the current value of #numInput and subtract the range value from it.
Your subtractors array will just contain the value of the current range input. You need to loop over all the ranges and combine them.
const addBtn = document.querySelector(".solvePlusLogo")
function addSolvr() {
solvContain = document.querySelector('.solveContainer')
const solvDiv = document.createElement('div');
solvContain.appendChild(solvDiv);
const solvLabel = document.createElement('input');
solvDiv.appendChild(solvLabel);
const solvRange = document.createElement('input');
solvRange.type = "range";
solvRange.className = "range"
solvDiv.appendChild(solvRange);
}
addBtn.addEventListener('click', addSolvr)
document.addEventListener('input', function(event) {
if (event.target.matches(".range")) {
let full = document.querySelector("#numInput").value
const subtractors = document.querySelectorAll(".range");
subtractors.forEach(subtractor => full -= subtractor.value)
document.querySelector("#numDisplay").innerHTML = full
}
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input type="number" id="numInput">
<h3 id="numDisplay">
$0
</h3>
<div class="solveContainer" style="font-family: 'IBM Plex Mono', momnospace;">
<div class="solveIntro">
<button class="solvePlusLogo">Add Source
</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Create an html page, add 3 text boxes in which the user will input 3 numbers :a,b,c
Add a button that, on click, will calculate the maximum number of the three. The result will be displayed in an alert. The program should not crash if the user does not input one or two numbers.
Cases:
If no number is introduced then a message should be displayed asking the user to input at least on number.
If only one number of the three is introduced, that number is the maximum number.
If two numbers are introduced then it should be displayed the maximum of the two.
If three numbers are introduced then it should be displayed the maximum of the three.
I started like this:
function displaysubmit() {
var numarA = document.getElementById("numarA").value;
var numarB = document.getElementById("numarB").value;
var numarC = document.getElementById("numarC").value;
var numarAAsNumber = parseInt(numarA);
var numarBAsNumber = parseInt(numarB);
var numarCAsNumber = parseInt(numarC);
if (!isNaN(numarAAsNumber) && !isNaN(numarBAsNumber) && !isNaN(numarCAsNumber)) {
var Submit = Math.max(numarA, numarB, numarC);
alert(Submit);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercitiul2</title>
<script src="exercitiul2.js" type="text/javascript"></script>
</head>
<body>
<label>a</label>
<input type="text" id="numarA" />
<label>b</label>
<input type="text" id="numarB" />
<label>c</label>
<input type="text" id="numarC" />
<button id="submit">Submit</button>
</body>
</html>
I don't know how start to write in script. Please help me.
You did good just missing some basics;
1 - Wrap your inputs and submit button in form
2 - Add on-click function to button
3 - Pass event into function
4 - prevent form from submitting/reloading using that event
5 - You do not need to add parse int, you can make your inputs type="number" instead
6 - in if statement check if all 3 fields are empty then display message, if not calculate the submit
Example:
function displaysubmit(event) {
event.preventDefault();
var numarA = document.getElementById("numarA").value;
var numarB = document.getElementById("numarB").value;
var numarC = document.getElementById("numarC").value;
if (numarA === "" && numarB === "" && numarC === "") {
alert("Enter at least one number");
} else {
var Submit = Math.max(numarA, numarB, numarC);
alert(Submit);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercitiul2</title>
<script src="exercitiul2.js" type="text/javascript"></script>
</head>
<body>
<form>
<label>a</label>
<input type="number" id="numarA" />
<label>b</label>
<input type="number" id="numarB" />
<label>c</label>
<input type="number" id="numarC" />
<button id="submit" onclick="displaysubmit(event)">Submit</button>
</form>
</body>
</html>
Hint:
Select the elements by
document.getElementById("numarA").innerHTML
When left blank, it'll be "", and if you put it in any if statement it will return false e.g.
if (document.getElementById("numarA").innerHTML) {
someFunction();
}
won't do anything.
Did you add the button click event?
do
<button id="submit" onclick="displaysubmit()">Submit</button>
I am trying to change the word "lion" to "monkey" by using a function by using .replace in Javascript. I have set a time interval on it and it does work, but only in the console. Not in the browser when I am viewing the page. Why? Do I need to assign/update/upload it to the HTML somehow?
function toggleCaps(){
let text = document.querySelector(".about").innerText;
console.log(text);
var sum = text.replace(/lion/g, "monkey");
console.log(sum);
}
setInterval(toggleCaps, 3000);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="about">
<blockquote>
<p>
lion
</p>
</blockquote>
</div>
</body>
</html>
You need to update the html element with the replaced string as following:
function toggleCaps(){
let text = document.querySelector(".about").innerText;
console.log(text);
var sum = text.replace(/lion/g, "monkey");
document.querySelector(".about").innerText = sum; //add this
console.log(sum);
}
setInterval(toggleCaps, 3000);
yes you need to update the html:
function toggleCaps(){
let text = document.querySelector(".about").innerText;
console.log(text);
var sum = text.replace(/lion/g, "monkey");
console.log(sum);
document.querySelector(".about").innerText = sum;
}
new to AngularJS here, just started a new application, but it seems I'm missing something important in regards to controllers.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Arsenal Roster</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="arsenalApp" ng-controller="ArsenalController">
<input ng-model="name">
<span>{{age}}</span>
</div>
<script>
var arsenalApp=angular.module('arsenalApp',[]);
arsenalApp.controller('ArsenalController',function($scope){
if($scope.name=="jon"){
$scope.age=12;
}else{
$scope.age=1;
}
});
</script>
</body>
</html>
The functionality I want is: if I input 'jon' in the textbox, the output in the browser should change to 12, otherwise, for any other text, it should remain as 1.
As of now it just outputs 1 and doesn't change on entering 'jon'. What am I missing about controllers?
<input ng-model="name" ng-change="onNameChange()">
$scope.onNameChange = function () {
if ($scope.name=="jon") {
$scope.age=12;
} else {
$scope.age=1;
}
}
You need to listen to the change event whenever the name is being changed and the change function should handle your conditions.