I am trying to insert a while loop in a function called myFunction.
When you click on the button it should display the array result.
<!DOCTYPE html>
<html>
<body>
<button id="btn">Click Me!</button>
<p id="i"><strong>this</strong> represents:</p>
<p id="demo"></p>
<script>
function myFunction () {
let i = 0;
while(i<5){
document.write(i + '<br/>');
i++;
}
}
var btn = document.getElementById("btn");
btn.addEventListener("click", myFunction());
</script>
</body>
</html>
Try like this:
<!DOCTYPE html>
<html>
<body>
<button id="btn">Click Me!</button>
<p id="i"><strong>this</strong> represents:</p>
<p id="demo"></p>
<script>
function myFunction() {
console.log(1)
let i = 0;
while (i < 5) {
document.write(i + '<br/>');
i++;
}
}
var btn = document.getElementById("btn");
btn.addEventListener("click", myFunction);
</script>
</body>
</html>
There were a few minor bugs to correct, e.g. was() should likely be myFunction and the definition of myFunction needed brackets () after the function name.
You are missing () after myFunction:
function myFunction() {
let i = 0;
while(i<5){
document.write(i + '<br/>');
i++;
}
}
are you sure you want to use document.write and not console.log(i) ?
Related
I am a beginner with Javascript/programming and I am trying to make the "demo2" id change with the 5, 10 or 15 variable chosen in the functions (trigger by the buttons), but it keeps showing "0". What do I have to do?
<!DOCTYPE html>
<html>
<body>
<button onclick="alternative1()">5</button>
<button onclick="alternative2()">10</button>
<button onclick="alternative3()">15</button>
<p id="demo"></p>
<p id="demo2"></p>
<script>
var x = 0;
var y = 0;
function alternative1() {y = x + 5;
document.getElementById("demo").innerHTML = "You have chosen " + y;
}
function alternative2() {y = x + 10;
document.getElementById("demo").innerHTML = "You have chosen "+ y;
}
function alternative3() {y = x + 15;
document.getElementById("demo").innerHTML = "You have chosen "+ y;
}
document.getElementById("demo2").innerHTML = y;
</script>
</body>
</html>
You can’t access variables declared inside a function from outside a function. The variable belongs to the function’s scope only, not the global scope.
It is normal that there is zero because in 'y' there is zero and no operation performed on y.
I hope that this answer will help you to understand what you have done.
You don't need 3 functions for this. You can do it with 1.
<!DOCTYPE html>
<html>
<body>
<button onclick="alternative(this)">5</button>
<button onclick="alternative(this)">10</button>
<button onclick="alternative(this)">15</button>
<p id="demo"></p>
<script>
function alternative(obj) {
document.getElementById("demo").innerHTML = "You have chosen " + obj.innerHTML;
}
</script>
</body>
</html>
Happy learning
You need to change 'demo2 inner' after every operation and need to add new value to 'y' current value (use +=)
var x = 0;
var y = 0;
function alternative(param) {
y += x + param;
document.getElementById("demo").innerHTML="You have chosen "+ param;
document.getElementById("demo2").innerHTML = y;
}
<!DOCTYPE html>
<html>
<body>
<button onclick="alternative(5)">5</button>
<button onclick="alternative(10)">10</button>
<button onclick="alternative(15)">15</button>
<p id="demo"></p>
<p id="demo2"></p>
</body>
</html>
This question already has answers here:
using innerHTML in a loop is not properly displaying the set of json results
(4 answers)
Closed 5 years ago.
I wanne count to 100 in a div only using javascript. Why does only comes the last number.
Here is my code:
function test() {
for (var x = 1; x < 101; x++) {
document.getElementById("demo").innerHTML = (x + "<br />");
}
}function leer() {
document.getElementById("demo").innerHTML = "Delete"
}
<html>
<head>
<script src="function.js"></script>
</head>
<body>
<button type="button" onclick="test()">100</button>
<button type="button" onclick="leer()">Delete</button>
<div id="demo">
</div>
</body>
</html>
change document.getElementById("demo").innerHTML += (x + "<br />"); this line
function test() {
for (var x = 1; x < 101; x++) {
document.getElementById("demo").innerHTML += (x + "<br />");
}
}function leer() {
document.getElementById("demo").innerHTML = "Delete"
}
<html>
<head>
<script src="function.js"></script>
</head>
<body>
<button type="button" onclick="test()">100</button>
<button type="button" onclick="leer()">Delete</button>
<div id="demo">
</div>
</body>
</html>
Because the keep overriding the contents of the div with id "demo" by using innerHTML. You need to append the new number.
Please see this example (I updated your code).
function test() {
for (var x = 1; x < 101; x++) {
var current_contents = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML = current_contents + (x + "<br />");
}
}function leer() {
document.getElementById("demo").innerHTML = "Delete"
}
<html>
<head>
<script src="function.js"></script>
</head>
<body>
<button type="button" onclick="test()">100</button>
<button type="button" onclick="leer()">Delete</button>
<div id="demo">
</div>
</body>
</html>
Because it happens so fast that you only see the last number. Do something like this:
var _counter = 1;
var _timer = null;
function test() {
_counter = 1;
_timer = setInterval(function(){
document.getElementById("demo").innerHTML = (_counter + "<br />");
_counter++;
if(_counter > 100) clearInterval(_timer);
}, 1000);
}
function leer() {
document.getElementById("demo").innerHTML = "Delete"
}
<div id="demo"></div>
<button onclick="test();">Count</button>
<button onclick="leer();">Delete</button>
Try using .append instead of .innerHTML
I have a button calling function 'a':
<button id = "btn" type="button"
onclick="a();">someText</button>
This function's showing and hiding an element:
<p id="text" style= "display:none;">
Text.</p>
Function:
function a() {
var b= 0;
if (b === 0)
{
document.getElementById('text').style.display='block';
document.getElementById('btn').innerHTML="changed text";
b = 1;
}
else
{
document.getElementById('text').style.display='none';
document.getElementById('btn').innerHTML="someText";
b = 0;
}
}
It worked until I moved this function to a separate file 'x.js'.
I attached this file to my index.html:
<script type="text/javascript" src="x.js"></script>
What's wrong with it? What should I do to make it work?
var b= 0; should be defined before the function and be global
var b = 0;
function a() {
if (b === 0) {
document.getElementById('text').style.display = 'block';
document.getElementById('btn').innerHTML = "changed text";
b = 1;
} else {
document.getElementById('text').style.display = 'none';
document.getElementById('btn').innerHTML = "someText";
b = 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>The Steve Barrett Collection</title>
</head>
<body>
<button id="btn" type="button" onclick="a()">someText</button>
<p id="text" style="display:none;">
Text.</p>
</body>
</html>
What is the problem here when I click the buttons that are supposed to change the value?
<html>
<head>
<script type="text/javascript">
var x = 45;
var j = " I love pancakes";
</script>
</head>
<body>
<button type="button" onclick="f1();">Click me to change number</button>
<button type="button" onclick="f2();">Click me to change sentence</button>
<center>
<script type="text/javascript">
function f1()
{
if (x == 45)
{
x = 32;
}
}
function f2()
{
if (j == " I like pancakes")
{
j = " I don't like pancakes";
}
}
document.write(x);
document.write(j);
</script>
</center>
</body>
</html>
You can change the value of these variables just the way you've done it. However, the document.write won't be re-run automatically. The text you see on the page won't change, even though the variables have been updated.
Try using DOM to modify the content of the page when your event handler runs.
<html>
<head>
<script type="text/javascript">
var x = 45;
var j = " I love pancakes";
</script>
</head>
<body>
<button type="button" onclick="f1();">Click me to change number</button>
<button type="button" onclick="f2();">Click me to change sentence</button>
<center>
<script type="text/javascript">
function update()
{
document.getElementById('output').innerHTML = x + j;
}
function f1()
{
if (x == 45)
{
x = 32;
}
update();
}
function f2()
{
if (j == " I like pancakes")
{
j = " I don't like pancakes";
}
update();
}
document.write('<span id="output">');
document.write(x);
document.write(j);
document.write('</span>');
</script>
</center>
</body>
</html>
Try this:
<html>
<head>
<script type="text/javascript">
var x = 45;
var j = " I love pancakes";
</script>
</head>
<body>
<button type="button" onclick="f1()">Click me to change number</button>
<button type="button" onclick="f2()">Click me to change sentence</button>
<p id="sentence"></p>
<center>
<script type="text/javascript">
document.getElementById("sentence").innerHTML=x+j;
function f1(){
if (x == 45){
x = 32;
} else {
x = 45;
}
document.getElementById("sentence").innerHTML=x+j;
}
function f2(){
if (j == " I like pancakes"){
j = " I don't like pancakes";
} else {
j = " I like pancakes";
}
document.getElementById("sentence").innerHTML=x+j;
}
</script>
</center>
</body>
</html>
it uses the innerHTML property to change the content
There was also another problem:
the write function were outside the function so it's never called
I'm not sure if the title makes sense, but I'm trying to dynamically change the value of a variable in a loop through a text input.
Take a look at my code so far
<script type="text/javascript">
function test() {
var count;
var str = document.getElementById('inputter').value;
var plus = str;
for(count = 0; count < 5; count++, str += plus){
document.write("<br />");
document.write(str);
}
};
</script>
<input type="text" id="inputter" name="inputter"></form>
<button id="sub" type="button" onclick="test()">Try It Out</button>
so if you hit the button with whatever you put in as a value in the text field, say for example... You put "X" the result would be...
X
XX
XXX
XXXX
XXXXX
but then the form field disappears and I would have to refresh the page to do it again? Is there a way I can do this dynamically? So without refreshing, I would like to be able to type in a new string, and it would change.
Thanks in advance!
document.write() is overwriting your page. Don't use it, use DOM modification functions to put the string in a DIV.
<input type="text" id="inputter" name="inputter"></form>
<button id="sub" type="button" onclick="test()">Try It Out</button>
<div id="output"></div>
<script>
function test() {
var count;
var str = document.getElementById('inputter').value;
var plus = str;
var output = '';
for(count = 0; count < 5; count++, str += plus) {
output += "<br />" + str;
}
document.getElementById('output').innerHTML = output;
};
</script>
DEMO
use a div and fill with data:
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form>
<input type="text" id="inputter" name="inputter">
<button id="sub" type="button" onclick="test()">Try It Out</button>
</form>
<div id="theText"></div>
<script type="text/javascript">
function test() {
var count;
var str = document.getElementById('inputter').value;
var plus = str;
var theText = document.getElementById('theText');
for (count = 0; count < 5; count++) {
str += plus;
theText.innerHTML = theText.innerHTML + str + '<br/>';
}
};
</script>
</body>
</html>
Do you mean something like this?:
var str;
function test() {
var str += document.getElementById('inputter').value;
document.write("<br />");
document.write(str);
}