I just started learning javascript. I develop an input box that user enters a number in. so program decrease number to zero.
my problem is here; I enter a number and show same it in output, but show a decreasing number.
my JS code :
function test() {
var MyInput = parseInt(document.getElementById('HoursOfWork').value);
var Exp_MyInput = document.getElementById('output01').innerHTML = "Number: " + MyInput;
for (var i = 1; i < 4; i++) {
document.getElementById('output01').innerHTML = MyInput;
}
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="StyleSheet.css" />
<script src="Script.js"></script>
<title>EyeProctect Project</title>
</head>
<body>
<h1>Eye Protect</h1>
<h4>Keep Your Eyes safe</h4>
<input type="text" id="HoursOfWork" placeholder="Enter your hours of work ...." />
<button class="start" onclick=test()>Let's Go!</button>
<p id="output01"></p>
</body>
</html>
What am I do?
If you meant counting down from number provided in input field down to zero using for loop then you can work with this approach:
function test() {
var MyInput = parseInt(document.getElementById('HoursOfWork').value);
var output = document.getElementById('output01');
output.innerHTML = '';
for (var i = MyInput; i > 0; i--) {
output.innerHTML += "Number: " + i + "<br>";
}
}
Related
I am trying to do an assignment where it makes random lotto numbers. I have it all built out, but when I put the first value in and it runs it will post to the HTML. Then doing a second value will concatenate to the first instead of clearing. I've tried .reset and value = "" but I must be doing something wrong. I tried searching the old posts, but couldn't find anything as I wasn't sure exactly what the problem was.
var buttons = document.getElementById("create");
var numbers = [];
var shownSelection = ""
function makeIt() {
var input = document.getElementById("count").value;
var resultsDiv = document.getElementById("results");
if (input > 8) {
alert("Too many numbers. Please try less than 8.")
} else if (input < 1)
alert("Nothing to predict.")
else
for (var i = 0; i < input; i++) {
numbers[i] = Math.ceil(Math.random() * 99);
}
for (var i = 0; i < input; i++) {
if (i == input - 1) {
shownSelection = shownSelection + numbers[i];
} else {
shownSelection = shownSelection + numbers[i] + "-";
}
}
resultsDiv.innerHTML =
shownSelection;
document.getElementById("results").value = "";
};
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lucky Lotto Game</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/javascript.js" defer></script>
</head>
<body>
<div class="entry">
<ul>
<li><input type="text" id="count" placeholder="Enter number between 1 and 8" /></li>
</ul>
</div>
<div id="buttons" class="buttons">
<button id="create" onclick="makeIt()" class="create">Get my numbers</button>
</div><br><br><br>
<span id="results"></span>
</body>
</html>
You should initialize your 'shownSelection' variable inside the function so it will be empty each time you press the button:
var buttons = document.getElementById("create");
var numbers = [];
function makeIt() {
var shownSelection = ""
var input = document.getElementById("count").value;
var resultsDiv = document.getElementById("results");
if (input > 8) {
alert("Too many numbers. Please try less than 8.")
} else if (input < 1)
alert("Nothing to predict.")
else
for (var i = 0; i < input; i++) {
numbers[i] = Math.ceil(Math.random() * 99);
}
for (var i = 0; i < input; i++) {
if (i == input - 1) {
shownSelection = shownSelection + numbers[i];
} else {
shownSelection = shownSelection + numbers[i] + "-";
}
}
resultsDiv.innerHTML =
shownSelection;
document.getElementById("results").value = "";
};
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lucky Lotto Game</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/javascript.js" defer></script>
</head>
<body>
<div class="entry">
<ul>
<li><input type="text" id="count" placeholder="Enter number between 1 and 8" /></li>
</ul>
</div>
<div id="buttons" class="buttons">
<button id="create" onclick="makeIt()" class="create">Get my numbers</button>
</div><br><br><br>
<span id="results"></span>
</body>
</html>
How do you multiply a string i.e "Enter Name" based on what number was entered in a input field and create a vertical numbered list based on said output. Any advice would be great!
Example:
hello name
hello name!
hello name
hello name!
hello name
etc.
Ive tried a couple of things. A loop seems like the logical answer, but I'm not sure how to implement it. I'm still in the process of learning javascript so not everything is immediately apparent or obvious.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale-1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
</head>
<body>
<div>
<label for="first-name">Frist Name!</label>
<input type="text" name="first-name-text" id="first-name-text" placeholder="Enter a name">
<br>
<br>
<label for="n-times">Number of times</label>
<input type="text" name="n-times-text" id="n-times-text" placeholder="Enter a number">
</div>
<div>
<p id="hello-message">Hello World!</p>
</div>
<br>
<div>
<button id="hello-button">Display Hello!</button>
<button id="reset-button">Reset</button>
</div>
<script src="script.js"></script>
</body>
</html>
javascript
let firstNameText = document.getElementById("first-name-text");
let helloMessage = document.getElementById("hello-message");
let nTimesText = document.getElementById("n-times-text")
function hideMessage( ) {
helloMessage.style.display = "none";
}
function showMessage() {
helloMessage.style.display = "";
}
function displaymessages(name) {
// let helloMessage = document.getElementById("hello-message")
helloMessage.innerText = "Hello " + name + "!";
// let goodbyeMessage = document.getElementById("goodbye-message")
// goodbyeMessage.innerText = "Goodbye " + name + "!";
showMessage();
}
hideMessage();
let helloButton = document.getElementById("hello-button");
helloButton.addEventListener('click', function() {
let firstNameText = document.getElementById("first-name-text");
displaymessages(firstNameText.value);
console.log('first name:' + firstNameText.value);
});
let resetButton = document.getElementById("reset-button");
resetButton.addEventListener('click', function() {
firstNameText.value = "";
nTimesText.value = "";
hideMessage();
});
You can use String.prototype.repeat().
let helloButton = document.getElementById("hello-button");
helloButton.addEventListener('click', function() {
let firstNameText = document.getElementById("first-name-text");
displaymessages(firstNameText.value.repeat(+nTimesText.value));
console.log('first name:' + firstNameText.value);
});
If you need to print line by line (vertically) then you have to use symbol "\n" and which will create new line.
I have changed your example code and see below,
function displaymessages(name, index) {
helloMessage.innerText += index + " " + "Hello " + name + "!\n";
showMessage();
}
let helloButton = document.getElementById("hello-button");
helloButton.addEventListener('click', function () {
let firstNameText = document.getElementById("first-name-text");
helloMessage.innerText = "";
var numberTimes = parseInt(nTimesText.value)
for (var i = 0; i < numberTimes ; i++) {
displaymessages(firstNameText.value, (i + 1));
}
});
I´m almost got it, but it still not working out like I want
it -- I got s var a = generates an integer between 1 and 50
the integer (result) is output in a textare id("tt4")
but I can't get it done 50 times, I tried to use a for loop // but like I said, I´m
hanging here...
function add() {
var a = Math.floor(Math.random() * 50) + 1;
for (var i = 0; i < 49; i++) {
document.getElementById("tt4").innerHTML = a + ('\n');
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<button onclick="add()">OK</button>
<br><br>
<textarea id="tt4" name="t4"></textarea>
</body>
</html>
I know that the problem is in the for-loop, because 'nothing' hapens with the var i inside the loop // but I can't figure it out
You need to concatenate the innerHTML property in order to update the display. You also need to move your random number generation into your loop. Here is a sample:
function add() {
for (var i = 0; i < 49; i++) {
var a = Math.floor(Math.random() * 50) + 1;
document.getElementById("tt4").innerHTML += a + ('\n');
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<button onclick="add()">OK</button>
<br><br>
<textarea id="tt4" name="t4"></textarea>
</body>
</html>
You will need to use += instead of = when setting the innerHTML of the textarea (which will add more HTML instead of replacing the HTML with the current random number).
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<button onclick="add()">OK</button>
<br><br>
<textarea id="tt4" name="t4"></textarea>
<script>
function add() {
for (var i = 0; i < 49; i++) {
var a = Math.floor(Math.random() * 50) + 1;
document.getElementById("tt4").innerHTML += a + ('\n');
}
}
</script>
</body>
</html>
If you place the random() inside the loop, each iteration generates a new number, otherwise you have the same number. Also += add content, intead of =, that assign and replace the content.
for (var i = 0; i < 49; i++) {
var a = Math.floor(Math.random() * 50) + 1;
document.getElementById("tt4").innerHTML += a + ('\n');
}
<textarea id="tt4" name="t4"></textarea>
I have been struggling with the this output from which hangs my browser. When I run the following code it runs fine.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript">
var input = 5;
for(var i=1;i< 5;i++){
input = i*input;
}
document.write(input);
</script>
</body>
</html>
But this hangs the browser and I have to stop it finally. I cant't find any bug or error in this code.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript">
var input = prompt("Enter the number to get factorial of: ");
var result = input;
for(var i=1;i < input;i++){
result = i * result;
}
document.write(result);
</script>
</body>
</html>
input = i*input; increases input so i < input is always false. Try smth like
var input = parseInt(prompt("Enter the number to get factorial of: "));
var result = input;
for(var i=1;i < input;i++){
result = i * result;
}
document.write(result);
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
function fact(num)
{
var x=parseInt(num);
if(x>0)
x=x* fact(x-1);
alert(x);
}</script>
</head>
<body>
<form name="f1">
Enter the Number :<input type="text" length="8" name="txt1"><br>
<input type="button" value="Find factiorial" onclick="fact(txt1.value)">
</form>
</body>
var y = prompt("type number ");
var x = input;
function fact(x) {
if(x==0) {
return 1;
}
return x * fact(x-1);
}
function run(number) {
alert(fact(parseInt(number, 10)));
}
run(x);
I sort of started coding for this. It's almost working.
My goals:
1) Check for the length or url's entered in a field (the total length) and reduce each link's length by 20 if the length is greater than 20
2) Determine the characters left in an input field
The javascript in profile.js (prototype):
function checkurl_total_length(text) {
var text = "";
var matches = [];
var total_length = 0;
var urlRegex = /(http|https):\/\/[A-Za-z0-9\.-]{3,}\.[A-Za-z]{3}/;
text.scan(urlRegex, function(match){ matches.push(match[0])});
for (var index = 0; index < matches.length; ++index) {
item = matches[index];
reduce_length = matches.length*20;
if(item.length>20) {
total_length = total_length + item.length - reduce_length;
}
else {
total_length = total_length + item.length;
}
}
return total_length;
}
function count_characters(field){
var limitNum=140;
var link_length = 0;
if(checkurl_total_length(field.value)!=0) {
link_length =link_length+ checkurl_total_length(field.value);
}
else {
link_length = 0;
}
limitNum = limitNum+link_length;
if( link_length !=0 ){
$("links").update("with links");
}
left = limitNum-field.value.length;
$("count").update(left);
}
THE HTML
<!DOCTYPE HTML>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>JUST A TEST FILE</title>
<script src="prototype.js" type="text/javascript"></script>
<script src="profile.js" type="text/javascript"></script>
</head><body>
<h1>
CHARACTERS COUNT
</h1>
<div class="container_24">
<h2 id="title2">
TESTING
</h2>
<div class="grid_24">
<div id="count"></div>
<br /s>
<div id="links"></div>
<form >
<textarea wrap="hard" onpaste="count_characters(this);" onkeyup="count_characters(this);" onkeydown="count_characters(this);" id="updates" onfocus="count_characters(this);" name="test"/> </textarea>
<input type="submit" value=" " name="commit" disabled=""/>
</form>
</div>
</div>
<!-- end .container_24 -->
</body></html>
Counting characters left is working but checking for url and the length of the url isn't. Any hints on why this isn't working?
not sure, but should this be
checkurl_total_length(field.value!=0) // ) != 0