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
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>
I'm very new at all of this and I need to create a JavaScript for loop that prints out the numbers 1 to 10 when a button is clicked and -1 to -10 when another button is clicked as the attached screenshot shows.
I've done this but I'm very stuck.
<!DOCTYPE html>
<html>
<body>
<h1>For loop statement exercise</h1>
<p>Press PLUS to display +1 to +10:
<button onclick="plus()">PLUS</button>
<p>Press MINUS to display -1 to -10:
<button onclick="myFunction()">MINUS</button>
<p id="i"></p>
<script>
for (i = 1; i <= 10; i++)
{
document.write("i" + < br > );
}
</script>
</body>
</html>
Try this
<!DOCTYPE html>
<html>
<body>
<h1>For loop statement exercise</h1>
<p>
Press PLUS to display +1 to +10: <button onclick="plus()">PLUS</button>
</p>
<p>
Press MINUS to display -1 to -10:
<button onclick="minus()">MINUS</button>
</p>
<p id="i"></p>
<script>
function minus() {
for (i = -1; i >= -10; i--) {
document.getElementById("i").innerHTML =
document.getElementById("i").innerHTML + `${i} <br>`;
}
}
function plus() {
for (i = 1; i <= 10; i++) {
document.getElementById("i").innerHTML =
document.getElementById("i").innerHTML + `${i} <br>`;
}
}
</script>
</body>
</html>
I don't know if you want it to add a number every time you click or add them all in just one click, but I did this:
<!DOCTYPE html>
<html>
<body>
<h1>For loop statement exercise</h1>
<p>Press PLUS to display +1 to +10:</p>
<button onclick="plus()">PLUS</button>
<p id="+"></p>
<p>Press MINUS to display -1 to -10:</p>
<button onclick="minus()">MINUS</button>
<p id="-"></p>
<script>
function plus() {
for(let i = 1; i <= 10; i++) {
document.getElementById("+").innerHTML += i + " ";
}
}
function minus() {
for(let i = -1; i >= -10; i--) {
document.getElementById("-").innerHTML += i + " ";
}
}
</script>
</body>
</html>
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) ?
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>