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>
Related
HTML File
<!DOCTYPE Html>
<html>
<head>
<script type= "text/javascript" src= "calc.js"></script>
</head>
<body>
<h1> Calculate away </h2>
<div id='display'>
<p>1</p>
</div>
</body>
</html>
JS File
document.addEventListener('DOMContentLoaded', turnOn)
function turnOn ()
{
document.getElementById('display').innerHtml = "`<p>0</p>`";
}
innerHTML is the correct name.
document.addEventListener('DOMContentLoaded', turnOn)
function turnOn () {
document.getElementById('display').innerHTML = "<p>0</p>";
}
Change document.getElementById('display').innerHtml to document.getElementById('display').innerHTML
Use document.querySelector just to replace the text of the p tag .
document.addEventListener('DOMContentLoaded', turnOn)
function turnOn() {
var getPElement = document.querySelector("#display p")
getPElement.innerHTML = 0;
}
<h1> Calculate away </h2>
<div id='display'>
<p>1</p>
</div>
<!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>
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 have an Image Slider which reads Image names from spans. What's wrong with my code? Even the alert command not executed. How to fix this?
<html><head>
<title></title>
<script src="Default.aspx_files/jquery-1.js" type="text/x-jquery-tmpl"></script>
<script src="Default.aspx_files/General.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
jQuery(function () {
var i = 0;
var banner = $('.imagesContainer span').map(function () {
return $.trim($(this).text())
}).get();
function fun() {
//How to init array here from inner text of spans?
i++;
if (i == banner.length) {
i = 0;
}
$('#img1').attr('src', '/slide/' + banner[i]);
alert('/slide/' + banner[i]);
}
setInterval(fun, 1000);
})
</script>
</head>
<body>
<form method="post" action="Default.aspx" id="form1">
<div class="imagesContainer">
<span>
73defe4b-9819-4e12-b351-3813686e0c83.gif
</span>
<span>
4c2ed116-500d-42ad-8aa5-983bf214d5d3.png
</span>
</div>
</form>
</body></html>
Its not that you didn't know but it worked on a change of type="text/x-jquery-tmpl" to text/javascript in your jquery inclusion.
I am trying to use some HTML tag inside JavaScript, but the HTML tag does not work. How can U use an HTML tag inside JavaScript? I wanted to use h1 but did not work.
if (document.getElementById('number1').checked) {
<h1>Hello member</h1>
}
You will either have to document.write it or use the Document Object Model:
Example using document.write
<script type="text/javascript">
if(document.getElementById('number1').checked) {
document.write("<h1>Hello member</h1>");
}
</script>
Example using DOM
<h1></h1> <!-- We are targeting this tag with JS. See code below -->
<input type="checkbox" id="number1" checked /><label for="number1">Agree</label>
<div id="container"> <p>Content</p> </div>
<script type="text/javascript">
window.onload = function() {
if( document.getElementById('number1').checked ) {
var h1 = document.createElement("h1");
h1.appendChild(document.createTextNode("Hello member"));
document.getElementById("container").appendChild(h1);
}
}
</script>
<html>
<body>
<input type="checkbox" id="number1" onclick="number1();">Number 1</br>
<p id="h1"></p>
<script type="text/javascript">
function number1() {
if(document.getElementById('number1').checked) {
document.getElementById("h1").innerHTML = "<h1>Hello member</h1>";
}
}
</script>
</body>
</html>
This is what I used for my countdown clock:
</SCRIPT>
<center class="auto-style19" style="height: 31px">
<Font face="blacksmith" size="large"><strong>
<SCRIPT LANGUAGE="JavaScript">
var header = "You have <I><font color=red>"
+ getDaysUntilICD10() + "</font></I> "
header += "days until ICD-10 starts!"
document.write(header)
</SCRIPT>
The HTML inside of my script worked, though I could not explain why.
here's how to incorporate variables and html tags in document.write
also note how you can simply add text between the quotes
document.write("<h1>System Paltform: ", navigator.platform, "</h1>");
JavaScript is a scripting language, not a HTMLanguage type. It is mainly to do process at background and it needs document.write to display things on browser.
Also if your document.write exceeds one line, make sure to put concatenation + at the end of each line.
Example
<script type="text/javascript">
if(document.getElementById('number1').checked) {
document.write("<h1>Hello" +
"member</h1>");
}
</script>
<div id="demo"></div>
<input type="submit" name="submit" id="submit" value="Submit" onClick="return empty()">
<script type="text/javascript">
function empty()
{
var x;
x = document.getElementById("feedbackpost").value;
if (x == "")
{
var demo = document.getElementById("demo");
demo.innerHTML =document.write='<h1>Hello member</h1>';
return false;
};
}
</script>
<div id="demo"></div>
<script type="text/javascript">
if(document.getElementById('number1').checked) {
var demo = document.getElementById("demo");
demo.innerHtml='<h1>Hello member</h1>';
} else {
demo.innerHtml='';
}
</script>