So here is the problem.I want user to enter number of index in text box for array. After taking index i want user to enter value from a prompt box to store in that array but that prompt box is coming over and over again and i have to click on button every time to take input
Here is the code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<label> Enter Number of Records </label>
<input type="text" id="t1">
<input type="button" value="Enter" onClick="record()">
<h1 id="demo"></h1>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
Java Script:
var data = document.getElementById("t1").value;
function record(){
var crap = new Array(data);
for(var i=0;i<crap.length;i++){
crap[i] = prompt("Add something in my array","");
document.getElementById("demo").innerHTML += crap[i]+"<br>";
}
In your case, you are retrieving data outside the function. Thus its value will be 'undefined' and the crap will became the array of one value that is undefined. So crap.length will be always 1.
Try this:
function record(){
var data = document.getElementById("t1").value;
var crap = []
if(crap != undefined)
for(var i=0;i<data;i++){
var tmp = prompt("Add something in my array","");
crap.push(tmp);
document.getElementById("demo").innerHTML += crap[i]+"<br>";
}
}
Enjoy coding ....
Try this,This will solve your issue.
You are just declaring an array named crap, and you are trying to get the crap.length even before the array is filled, so you are getting the issue. Since data has your value try looping with data value.
function record(){
data = document.getElementById("t1").value;
var crap = new Array(parseInt(data)); // you should take data here, since crap is empty at this point.
console.log(data)
for(var i=0;i<data;i++){
crap[i] = prompt("Add something in my array","");
document.getElementById("demo").innerHTML += crap[i]+"<br>";
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<label> Enter Number of Records </label>
<input type="text" id="t1">
<input type="button" value="Enter" onClick="record()">
<h1 id="demo"></h1>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
Please run the code snippet and check the answer.
Related
This question already has an answer here:
Why is the value of my input always empty if I store it in a variable?
(1 answer)
Closed last year.
I am not really sure what is happening but I want to write a program that puts commas in a number you input, but when I run it and input a number the output is blank. Can anyone help???
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="script.js" defer></script>
</head>
<body>
<h1>Enter your number below:</h1>
<input type="text" placeholder="Right here" id="number">
<button id="submitButton">Add commas</button><br>
<h1 id="numberWithCommas">0</h1>
</body>
</html>
JavaScript:
const number = document.querySelector("#number").value;
let answerElement = document.querySelector("#numberWithCommas")
const button = document.querySelector("#submitButton");
button.addEventListener("click", () => {
answerElement.textContent = number.toLocaleString();
})
I am not really sure what is happening so I can't tell you much. Sorry.
let answerElement = document.getElementById('numberWithCommas');
const button = document.getElementById('submitButton');
button.addEventListener("click", () => {
const number = document.getElementById('number').value;
answerElement.textContent = Number(number).toLocaleString();
})
You need to use Number(x) for it to work. Also, the variable number should be defined after the button press, each time.
I have a difficult question, I am trying to get the input value of an input field, however, I need this to happen within another function.
I already have code that works outside of this other function but I need to refactor it to work inside another function that I am calling.
Examples of working code and non-working code are below.
Here is the HTML where I am getting the input:
<!DOCTYPE HTML>
<HTML>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/styles.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/require.js"></script>
<script type="text/javascript">
(function () {
var config = {
baseUrl: "js",
};
var dependencies = ["otherFile"];
require(config, dependencies);
})();
</script>
</head>
<body>
<div>
<label>Input URL</label>
<input type="url" />
<p id="targetInput"></p>
</div>
</body>
</html>
Here is the non-working JS that I am trying to call within another function:
function someOtherFunction() {
var getCurrentInput = function() { };
var input = document.querySelector("input");
var log = document.getElementById("targetInput");
input.addEventListener("input", getCurrentInput);
var getCurrentInput = function (e) {
log.currentInput = e.target.value;
};
}
});
Lastly here is the working code that works outside of the scope of someOtherFunction
var getCurrentInput = "";
var input = document.querySelector("input");
var log = document.getElementById("targetInput");
input.addEventListener("input", getCurrentInput);
function getCurrentInput(e) {
log.currentInput = e.target.value;
}
Now you may notice that there isn't a form being submitted here, the reason for this is because this code is running on an iframe that is being called into another app. The submit is happening there but requires me to call a function to make it happen and technically isn't a submit, meaning I don't have control over it like a regular submit. This is why I need to call the current input value inside someOtherFunction.
Any help would be greatly appreciated here! Essentially I want to get the value inside the input and update my API with the value as a JSON string. There must be a better way!
Was a bit difficult to follow at first given the nesting, but something like this?
const doThing = (e) => {
let input = document.getElementById("input");
let log = document.getElementById("targetInput");
log.textContent = input.value;
}
<div>
<label>Input URL</label>
<input type="url" id="input"/>
<p id="targetInput"> </p>
</div>
<button onclick="doThing()">Click</button>
Essentially an external submit that takes an internal input value, and injects it into another internal element?
toExponential() Method is not working my code.
chrome console is giving this error:
Uncaught TypeError: number.toExponential is not a function.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS Code Academy</title>
</head>
<body>
<input type="number" id="myInput" value="2.326">
<button id="myButton">Click Me!</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script type="text/javascript">
document.getElementById("myButton").onclick = function() {
var number = document.getElementById("myInput").value;
var str = number.toExponential(2);
document.getElementById("demo1").innerHTML = str;
document.getElementById("demo2").innerHTML = typeof str;
};
</script>
</body>
</html>
toExponential is a method defined on the number class. So make sure that you are calling it on a number and not a string:
var value = document.getElementById("myInput").value;
var number = parseFloat(value);
if (!isNaN(number)) {
// The string value entered in the textbox was successfully parsed to a number
// we can now calculate the exponential:
var str = number.toExponential(2);
}
If you have <input type="number" id="myNumber" /> , the entry must be just numbers so it will be easier for users to work with it. Darin's code is a good solution.
I'm making a small website as a test. Very new to JavaScript and HTML forms so I thought i'd throw myself into what I consider to be the deep end and give it a go.
I'm trying to get an interger to be displayed on the page, that is the result of a few calculations.
I want to find the difference between the first number (current value), and the second number (desired value) and then divide that number by 25 and store that as a variable. I then want to display that variable inside a message.
My current HTML :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<title>MMR calculator</title>
</head>
<body>
<h1>Type in your current MMR, and your desired MMR and click "Calculate"</h1>
<form>
<input type="text" id="currentRating" placeholder="What is your current MMR?">
<input type="text" id="desiredRating" placeholder="What is your desired MMR?">
<input type="submit" onclick="calculate()">
</form>
<script src="js/main.js"></script>
</body>
</html>
My current JavaScript :
function calculate() {
var currentRating = document.getElementById("currentRating");
var desiredRating = document.getElementById("desiredRating");
var difference = desiredRating - currentRating;
var gamesToPlay = difference / 25;
document.write("You need to play " + gamesToPlay + " to get to " + desiredRating);
}
You are 99% there. All you have to do is change
var currentRating = document.getElementById("currentRating");
var desiredRating = document.getElementById("desiredRating");
into
var currentRating = parseInt(document.getElementById("currentRating").value);
var desiredRating = parseInt(document.getElementById("desiredRating").value);
The way you had it, those variables just held the HTML (technically, DOM) elements themselves, and not the values that were in them. This gets the values and then turns them into integers so you can do math with them. If you do this, your site do exactly what you want it to do.
Be careful:
var currentRating = document.getElementById("currentRating").value;
is a String (text) value... to be sure of int value you can do
try{
var currentRatingInt = parseInt(currentRating);
}catch(e){
alert(currentRating + " is not an integer");
}
If you like to display result in page you can use a DIV with and id and do:
document.getElementById("idOfYourDiv").innerHTML = "What you like to display in div";
hope this code will help :
html :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<title>MMR calculator</title>
</head>
<body>
<h1>Type in your current MMR, and your desired MMR and click "Calculate"</h1>
<div>
<input type="text" id="currentRating" placeholder="What is your current MMR?">
<input type="text" id="desiredRating" placeholder="What is your desired MMR?">
<button onclick="calculate();">Calculate</button>
</div>
<script src="js/main.js"></script>
</body>
</html>
javascript :
function calculate() {
var currentRating = document.getElementById("currentRating").value;
var desiredRating = document.getElementById("desiredRating").value;
var gamesToPlay = (desiredRating - currentRating) / 25;
gamesToPlay = Math.abs( parseInt(gamesToPlay) );
alert("You need to play " + gamesToPlay + " to get to " + desiredRating);
}
Subtract first field from the other, and if the value is not greater than 0 multiply by -1.
Divide that by 25.
I'm building a program that allows me to search a document to see how many times a word appears within that document. I would like to choose which word to search by entering the desired word into a search box that I've built. Currently, If I hard code the word that I'm searching for, it'll search the document and tell me how times it appears. If I try to use the search box to enter a word, I always get a result of 0. I need a way to retrieve the word entered from the search box and use that word as the word that I want to check.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>WordBubble</title>
<link rel="stylesheet" type="text/css" href="wordbubble.css">
<script type="text/javascript" src="jquery-1.10.2.js"></script>
</head>
<body>
<div id="search">
Search Word: <input type="search" name="Wordsearch" size="35">
<button type="submit" class ="searchme">Search</button>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".searchme").click(function(){
var myWord = $ (this).text();
findDuplicates();
});
});
// ajax call to get comments document
function findDuplicates (myWord) {
$.get( "comm.txt", function( text ) {
words = text.split(' '),
sortedWords = words.slice(0).sort(),
duplicateWords = []
for (var i=0; i<sortedWords.length-1; i++) {
if (myWord == sortedWords[i]) {
duplicateWords.push(sortedWords[i]);
}
}
$( "p" ).html(duplicateWords.length);
});
}
</script>
<p></p>
</body>
</html>
In your click-handler you retrieve the searchstring from the button instead from the input.
$(document).ready(function(){
$(".searchme").click(function(){
// get the word from the input
var myWord = $('input').val();
findDuplicates(myWord);
});
});