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>
Related
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:
How do I get the value of text input field using JavaScript?
(16 answers)
Closed 2 years ago.
I am trying to create a working login interface with javascript. I've put down my code but it won't work and it does not show any type of error messages.
Thanks
Taris
function loginFunction() {
var x = document.getElementById("myText");
var y = document.getElementById("myText1");
console.log(x);
console.log(y);
if (x == "Tom" && y == "Halo") {
window.open("www.youtube.de");
}
}
const button = document.getElementById("button");
button.addEventListener('click', () => {
loginFunction();
});
<input type="username" id="myText" value="Tom">
<input type="password" id="myText1" value="Halo">
<button id="button">login</button>
You need to access the .value of the elements x and y - you're dealing with the element, not the value:
if (x.value == "Tom" && y.value == "Halo") { ... }
You forgot to add .value to selected text field.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="username" id="myText" value="Tom">
<input type="password" id="myText1" value="Halo">
<button id="button">login</button>
<script>
function loginFunction () {
var x = document.getElementById("myText").value;
var y = document.getElementById("myText1").value;
console.log(x);
console.log(y);
if(x === "Tom" && y === "Halo") {
console.log("login in");
//window.open("www.youtube.de");
}
else
{
console.log("failed");
}
}
const button = document.getElementById("button");
button.addEventListener('click', () => {
loginFunction();
});
</script>
</body>
</html>
The problem is that you are reading the value of those input elements. You have assigned the input itself to the variable.
var x = document.getElementById("myText").value;
function loginFunction() {
var x = document.getElementById("myText").value;
var y = document.getElementById("myText1").value;
console.log(x);
console.log(y);
if (x === "Tom" && y === "Halo") {
alert('open page')
//window.open("https://youtube.de");
}
}
const button = document.getElementById("button");
button.addEventListener('click', () => {
loginFunction();
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="username" id="myText" value="Tom">
<input type="password" id="myText1" value="Halo">
<button id="button">login</button>
</body>
</html>
<!DOCTYPE HTML>
<html>
<title>Fibonacci Assignment</title>
<head>
<script>
function chkInput(){
var n = parseInt(n1)
var a,b,r;
a = 0;
b = 1;
r = 1;
for(var i = 2; i <= n; i++){
r = a + b;
a = b;
b = r;
}
alert (r);
}
</script>
</head>
<body>
<input type="text"
id="n1">
<input type="button"
value="Enter"
onclick="chkInput(n1.value)">
</body>
</html>
I'm new to JavaScript and I've been attempting to construct a code for finding the Nth term of the Fibonacci Sequence where the User inputs a number and the sequence runs until the nth number. I have been tasked with using both a function and a for loop for this. However when I run it, no matter what number I input it returns as 1. My questions is why that might be? I'm a student so I just need general direction not the answer. This snippet is what I have so far.
You weren't capturing the text input value as a parameter.
You had:
checkInput()
It should be
chkInput(n1)
So your line
var n = parseInt(n1);
Was parsing undefined, so the value of n is now NAN (Not a Number), so the for loop never got executed.
function chkInput(n1) {
var n = parseInt(n1);
var a, b, r;
a = 0;
b = 1;
r = 1;
for (var i = 2; i <= n; i++) {
r = a + b;
a = b;
b = r;
}
alert(r);
}
<input type="text" id="n1">
<input type="button" value="Enter" onclick="chkInput(n1.value)">
You have almost done with your assignment.
You have missed to receive the value in the function definition.
Altering function chkInput(){ to function chkInput(n1){ will complete your assignment.
Find the your working code snippet below.
<!DOCTYPE HTML>
<html>
<title>Fibonacci Assignment</title>
<head>
<script>
function chkInput(inputValue) {
var n = parseInt(inputValue)
var a,b,r;
a = 0;
b = 1;
r = 1;
for(var i = 2; i <= n; i++){
r = a + b;
a = b;
b = r;
}
alert (r);
}
</script>
</head>
<body>
<input type="text" id="n1">
<input type="button" value="Enter" onclick="chkInput(n1.value)">
</body>
</html>
You need to get value of element using DOM functions like document.getElementById("n1").value
Also your algorithm is wrong it should have a = 1;
function chkInput(){
var n = parseInt(document.getElementById("n1").value)
var a,b,r;
a = 1;
b = 1;
r = 1;
for(var i = 2; i <= n; i++){
r = a + b;
a = b;
b = r;
}
alert (r);
}
<!DOCTYPE HTML>
<html>
<title>Fibonacci Assignment</title>
<head>
<script>
</script>
</head>
<body>
<input type="text"
id="n1">
<input type="button"
value="Enter"
onclick="chkInput(n1.value)">
</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
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