<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
var tic;
tic = 0;
</script>
<script type="text/javascript">
document.write(tic);
</script>
<script>
var ongngic;
ongngic = 1;
</script>
<button onclick="alert(tic=tic+ongngic);">Ice Cream</button>
</body>
</html>
I have displayed the variable "tic" with document.write. I'm not sure how to change it by clicking the id="b1" button. Can someone help me?
You need to update the variable as well as the DOM:
Do not use document.write().
Use a DOM Element and modify the .innerHTML.
Separate HTML and JavaScript.
var tic;
tic = 0;
var ongngic;
ongngic = 1;
document.getElementById("output").innerHTML = tic;
function perform() {
tic= tic + ongngic;
document.getElementById("output").innerHTML = tic;
}
<div id="output"></div>
<button onclick="perform();" type="button">Ice Cream</button>
You need to bind the values to HTML like below.
<body>
<div id="tic_div"></div>
<button onclick="add()">Ice Cream</button>
<script type="text/javascript">
var tic = 0;
var ongngic = 1;
document.getElementById("tic_div").innerHTML = tic;
function add(){
tic=tic+ongngic;
document.getElementById("tic_div").innerHTML = tic;
}
</script>
</body>
Related
I want to inject text into a div using a variable. Here's a Stack Snippet of my code:
tDNA() {
var dna = prompt("Enter the DNA: ");
}
document.getElementById("dna").innerHTML = "DNA: " + dna;
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<src="main.js">
<div id="dna"></div>
</body>
</html>
function promp
You need to import your script like this
<script type="text/javascript" src="main.js"></script>
You can try this out.
HTML
<html>
<head>
</head>
<body>
<script defer src = "main.js"></script>
<div id = "dna">
<p></p>
</div>
</body>
</html>
JavaScript
function promptDNA(){
var dna = prompt("Enter the DNA: ");
d1 = document.querySelector("p");
d1.textContent = dna;
}
promptDNA();
Like this, you have to add the data to the HTML where the variable dna is in scope and then actually call the function
function promptDNA(){
var dna = prompt("Enter the DNA: ");
document.getElementById("dna").textContent = "DNA: " + dna;
}
promptDNA()
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="dna"></div>
<script src="main.js"></script>
</body>
</html>
Also, you're importing your script improperly.
I wrote these few lines of code and would like the text to change once the button is pressed but its not working. Could you please find out the problem?
var omari = "Omari Lamar";
function omari (){
el = document.getElementById('slice');
el.textContent = omari + "Is a computer Programmer!";
}
<html>
<head>
<title></title>
</head>
<body>
<h1>Title Example</h1>
<button onclick="omari();">Click me</button>
<div id="slice">
sample text
</div>
<script src="app.js"></script>
</body>
</html>
Change the code to:
var omariName ="Omari Lamar";
function omari (){
el = document.getElementById('slice');
el.textContent = omariName + "Is a computer Programmer!";
}
Here you go, Your function name and variable name were the same
var omary ="Omari Lamar";
var omari = function(){
var el = document.getElementById('slice');
el.innerHTML = omary + "Is a computer Programmer!";
};
<html>
<head>
<title>
</title>
<script src="app.js"></script>
</head>
<body>
<h1>Title Example</h1>
<button onclick="omari();">Click me</button>
<div id="slice">
sample text
</div>
<script src="app.js"></script>
</body>
</html>
this is the problem:
you have a variable named omari and a function name omari. so, when you try calling the function omari, javascript actually looks at the variable definition, and not the function. just give them different name.
try the code below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
</head>
<body>
<script>
var _omari ="Omari Lamar";
function omari(){
el = document.getElementById('slice');
el.innerHTML = _omari + " Is a computer Programmer!";
}
</script>
<h1>Title Example</h1>
<button onclick="omari();">Click me</button>
<div id="slice">
sample text
</div>
</body>
</html>
Hello I'm doing a tutorial and the text "Yoo" is suppose to move right but it doesn't. Ty
<!DOCTYPE html>
<html>
<head>
<script>
var timer, x_pos=0, txt;
function _timer() {
txt = document.getElementById("txt");
x_pos = x_pos+1;
txt.style.left = x;
timer = setTimeout(_timer, 50);
}
</script>
</head>
<body onload="_timer()">
<h1 id="txt" style="position:absolute; left:0"> Yooo </h1>
</body>
</html>
Variable x is never defined and you should provide the left in px as
txt.style.left = x_pos + "px";
<!DOCTYPE html>
<html>
<head>
<script>
var timer, x_pos=0, txt;
function _timer() {
txt = document.getElementById("txt");
x_pos = x_pos+1;
txt.style.left = x_pos + "px";
timer = setTimeout(_timer, 50);
}
</script>
</head>
<body onload="_timer()">
<h1 id="txt" style="position:absolute; left:0"> Yooo </h1>
</body>
</html>
Variable x is never defined. Try:
txt.style.left = x_pos;
instead of
txt.style.left = x;
So that your final code is
<!DOCTYPE html>
<html>
<head>
<script>
var timer, x_pos=0, txt;
function _timer() {
txt = document.getElementById("txt");
x_pos = x_pos+1;
txt.style.left = x_pos;
timer = setTimeout(_timer, 50);
}
</script>
</head>
<body onload="_timer()">
<h1 id="txt" style="position:absolute; left:0"> Yooo </h1>
</body>
</html>
you had forget add unit :)
txt.style.left = x+'px';
I am trying to replace the content of id='js' with javascript, but this is not working for me. here is the code.
<html>
<head>
<title></title>
<script type="text/javascript">
var ball = 0;
function count_balls(ball){
var count = ball + 1;
return count;
}
document.getElementById('js').innerHTML = count_balls(0);
</script>
</head>
<body>
<p id='js'>Result Here</p>
</body>
</html>
Because the element is not initialized yet, it's not working. You can either move the javascript to the end of the HTML (preferred) as shown below:
<html>
<head>
<title></title>
</head>
<body>
<p id='js'>Result Here</p>
<script type="text/javascript">
var ball = 0;
function count_balls(ball){
var count = ball + 1;
return count;
}
document.getElementById('js').innerHTML = count_balls(0);
</script>
</body>
Or you can use jquery document.ready to achieve the same thing.
I want to find out how you count a certain number of clicks using onclick in javascript?
Here is my code:
<script>
var test= 1;
function myFunction(){
document.getElementById("hello").innerHTML= test;
test++;
}
</script>
I want to know how you can stop this code when it reaches 25 clicks?
That would be very helpful thanks.
If test is below 25 execute what's inside the if statements if not don't do anyhing.
<script>
var test= 1;
function myFunction(){
if(test < 25){
document.getElementById("hello").innerHTML= test;
test++;
}
}
</script>
Here is a an example with sample code:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
var test = 1;
function myFunction() {
if (test < 25) {
document.getElementById("hello").innerHTML = test;
test++;
}
}
</script>
</head>
<body>
<div id="MyDiv" onclick="myFunction()">
Click me!!
</div>
<div id="hello">
</div>
</body>
</html>