I'm a newbie in JavaScript. I want to generate some numbers and display the whole on html element.
Bellow is the code I wrote. I'm only getting a single number generated on html but I'm getting what I want on the console.
var b;
function gen(){
for (var i = 0; i < 10; i++){
b = Math.random().toString();
console.log(b);
document.getElementById('output').innerHTML = b;
};
}
<h1>Generate Phone numbers</h1>
<p>
<input type="button" value="Generate" class="btn" onclick="gen()">
<p>
<span id="output"></span>
Please how do I get what is exactly on the console to html when I click generate button?
Thanks you
You can use insertAdjacentHTML method:
var b;
function gen(){
for (var i = 0; i < 10; i++){
b = Math.random().toString();
document.getElementById('output').insertAdjacentHTML('beforeend', b);
};
}
<h1>Generate Phone numbers</h1>
<p>
<input type="button" value="Generate" class="btn" onclick="gen()">
<p>
<span id="output"></span>
Add a temporary variable to the outside of the loop. Then assign that value to the innerHTML of your span tag.
var phoneNumber = "";
for (var i = 0; i < 10; i++){
b = Math.random().toString();
console.log(b);
phoneNumber += b;
};
document.getElementById("output").value = phoneNumber;
Related
This question already has answers here:
How do I get the value of text input field using JavaScript?
(16 answers)
Closed 2 years ago.
function stringGen(num) {
var result = "";
var alpha =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";
var alpha1 = alpha.length;
for (var i = 0; i < num; i++) {
result += alpha.charAt(Math.floor(Math.random() * alpha1));
}
return result;
}
var number = document.getElementById("num");
console.log(stringGen(number));
<html>
<body>
<div>
Enter the length of character:
<input type="text" id="num" />
<button onclick="stringGen(5)">submit</button>
<p id="result"></p>
</div>
<script type="text/javascript" src="app/index.js"></script>
</body>
</html>
Please find the error. I'm not getting the answer to this. I want to display the random text with the length from the value given in the text field in HTML.
I have update your code to fix not showing random text .
At first i get input data by var num = +document.getElementById("num").value; I use + for convert into integer. you code is not showing becouse you do not write any code to show. use document.getElementById("result").innerHTML =result to show in div.
function stringGen(num) {
var result = "";
var alpha =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";
var alpha1 = alpha.length;
for (var i = 0; i < num; i++) {
result += alpha.charAt(Math.floor(Math.random() * alpha1));
}
return result;
}
function showResult(){
var num = +document.getElementById("num").value;
document.getElementById("result").innerHTML =stringGen(num);
}
<div>
Enter the length of character:
<input type="text" id="num" />
<button onclick="showResult()">submit</button>
<p id="result"></p>
</div>
I want to enter five numbers into the array using one text box. And find the max number print it when I click the result button. I want to enter a number one by one when I clicked the add button it automatically add one by one to the array. HTML with JavaScript
var input = document.getElementById('input').value;
function Add(numbers) {
numbers = [];
for(int x = 0; x < 5; x++) {
var numbers = input[x];
}
return numbers;
}
function findMax(arr) {
var max = arr[0];
for(var i = 0; i < arr.length; i ++) {
if(arr[i] > max) max = arr[i];
}
return max;
}
function Result() {
document.write(document.getElementById('demo').innerHTML = findMax(arr))
}
<p id = "demo">Print here the result</p>
<input type = "text"; id = "input">
<button onclick = "Add()">Add</button>
<button onclick = "Result()">Result</button>
To get all the 5 elements in an array using a single textbox, if they are seperated by single space do this:
var arr = input.split(' ');
This will create an array 'arr' with the numbers in it!
Actually there are many errors, that needs to be fixed, in the code you wrote:
You are declaring the numbersarray twice, inside your add function, while you should be declaring it only once globally outside of it.
You don't need a loop to add the input value into the array, just use .push().
You don't need to return the numbers array after adding an element.
Don't use document.write() to show the result, just use document.getElementById('demo').innerHTML = findMax(numbers).
Make sure to pass the right numbers array to your findMax()function, instead of arr in findMax(arr).
Demo:
This is a demo with these errors corrected.
var input = document.getElementById('input');
var numbers = [];
function Add() {
if (numbers.length < 5) {
numbers.push(+input.value);
input.value = "";
}
}
function findMax(arr) {
var max = arr[0];
for (var i = 1; i < arr.length; i++) {
if (arr[i] > max)
max = arr[i];
}
return max;
}
function Result() {
console.log(numbers);
document.getElementById('demo').innerHTML = findMax(numbers);
}
<p id="demo">Print here the result</p>
<input type="text" ; id="input">
<button onclick="Add()">Add</button>
<button onclick="Result()">Result</button>
You can try this code bellow :
<body>
<p id = "demo">Print here the result</p>
<input type = "text"; id = "input">
<button onclick = "Add()">Add</button>
<button onclick = "Result()">Result</button>
<script>
var numbers=[];
function Add() {
var input = document.getElementById('input').value;
if(input != ""){
numbers.push(parseFloat(input));
}
document.getElementById('input').value="";
console.log(numbers);
}
function Result() {
console.log(numbers);
document.getElementById('demo').innerHTML = Math.max.apply(null, numbers);;
}
</script>
</body>
I am trying to build a simple javascript calculator that will ask user to input name and it will display a number according to input, each letter in string will have a value like a=1 and b=2. If we insert acb in input it should display abc=1+2+3 =6.
thanks
<input type="text" id="myText" value="">
<button onclick="myFunction()">Try it</button>
<p id="calc"></p>
<script>
function myFunction() {
var x = document.getElementById("myText").value;
document.getElementById("calc").innerHTML = x;
}
</script>
Try this, it uses a simple a=1 to z=26 code. If a special character or number is entered, they are treated as 0. This does work for uppercase and lowercase letters.
function myFunction() {
var x = document.getElementById("myText").value;
var total = 0;
for (var i = 0; i < x.length; i++) {
var temp = x.toLowerCase().charCodeAt(i) - 96;
if ((temp > 0) & (temp < 27)) {
total = total + temp;
}
}
document.getElementById("calc").innerHTML = total;
}
<input type="text" id="myText" value="">
<button onclick="myFunction()">Try it</button>
<p id="calc"></p>
This question already has answers here:
how to append to a object with innerHTML
(7 answers)
Closed 6 years ago.
The function will display all the even numbers between starting number and ending number based on the step value.
For example, if I enter 1, 20, and 3.
I should have 4, 10, and 16 as even number.
I need to push all the numbers inside evenNum array into #result span.
Currently it seems to only display the last even number inside the array.
Further more, if I would like to display all even number in vertical line, how do I do it?
https://codepen.io/anon/pen/wgwaey
<body>
<div class="container">
<h1>Sample</h1>
</div>
<div class="container">
<label>Starting Number: </label>
<input id="startingNum" type="text">
<br>
<label>Ending Number: </label>
<input id="endingNum" type="text">
<br>
<label>Step: </label>
<input id="step" type="text">
<br>
<button onclick="playButton()" id="play">Display Evens</button>
</div>
<div class="container">
<p>Here are the even numbers between <span id="startNum"></span> and <span id="endNum"></span> by <span id="stepNum"></span>'s:</p>
<span id="result"></span>
</div>
</body>
JS:
<script>
function playButton(){
run();
}
function run(){
var x = parseInt(document.getElementById("startingNum").value);
var y = parseInt(document.getElementById("endingNum").value);
var z = parseInt(document.getElementById("step").value);
document.getElementById("startNum").innerHTML = x;
document.getElementById("endNum").innerHTML = y;
document.getElementById("stepNum").innerHTML = z;
var evenNum = [];
while (x < y){
if (x%2 == 0){
evenNum.push(x);
}
x += z;
for (var i = 0; i<evenNum.length; i++){
document.getElementById("result").innerHTML = evenNum[i];
}
}
}
</script>
The problem is here:
for (var i = 0; i<evenNum.length; i++){
document.getElementById("result").innerHTML = evenNum[i];
}
You need to move this out of the while loop and change it to
document.getElementById("result").innerHTML += ' ' + evenNum[i];
// ^ add to existing
Or, more simply, delete the for loop and put this after the while loop:
document.getElementById("result").innerHTML = evenNum.join(' ');
The mistake above is that you're continuously reseting the result's inner HTML, so the last element of even num is the only one displayed. Also, you don't need to be updating result inside of your while loop, you can do it once you're done looking. Try this out!
function playButton(){
run();
}
function run(){
var x = parseInt(document.getElementById("startingNum").value);
var y = parseInt(document.getElementById("endingNum").value);
var z = parseInt(document.getElementById("step").value);
document.getElementById("startNum").innerHTML = x;
document.getElementById("endNum").innerHTML = y;
document.getElementById("stepNum").innerHTML = z;
var evenNum = [];
while (x < y){
if (x%2 == 0){
evenNum.push(x);
}
x += z;
}
for (var i = 0; i<evenNum.length; i++){
document.getElementById("result").innerHTML += "<p>" + evenNum[i] + "</p>";
}
}
Greetings I am trying to do a simple swap by comparing 2 numbers from a string and the switching the higher number to the left. I am using a while loop to make the changes but i get a TypeError: input is not a function chartest.html:32:4
I do not see what i am doing wrong can anyone look at my code. Here is a look at my code.
<body>
<form>
Enter numbers to be sorted from into high to low
<input id="num" type="text" value="" >
<br>output<input id="forTest" type="text">
<br><button type="button" onclick="calc(); return false" >Enter</button>
<input type="reset">
</form>
<p id="what"></p>
<script>
function calc()
{
var input = document.getElementById("num").value;
var wordlength = input.length;
var i = 0;
while(i < wordlength -1)
{
a = input.charAt(i);
b = input.charAt(i+1);
if(a < b)
{
input(i) = b;
input(i+1) =a;
}
i++;
}
alert(input);
//document.getElementById("forTest").value = testString;
//document.getElementById("what").innerHTML = testString;
}
</script>
</body>
Functional programming is your friend :)
var input = document.getElementById("num").value;
var arrayOfChars=input.split(""); //Or split by comma or whatever
var sortedArrayOfChars=arrayOfChars.sort(sortingFunction);
function sortingFunction(a,b){return a-b;}
Or, as a 1 liner...
input.split("").sort(function(a,b){return a-b;})