How can I display multiline comments or messages within the browser? For example, if I wanted a user to click a box and have the browser display multiple lines in the format of question #1-10:
<!DOCTYPE html>
<html>
<body>
<h1>Mathematics Review</h1>
<p>Click Below For a Quick Review:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">Please Take Notes!</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Question #1";
}
</script>
</body>
</html>
Ultimately, when the user clicks the "Click Me" button, questions should display like this:
Question #1
Question #2
Question #3
Question #4
and so on....
Also, do different browsers behave differently when trying to implement this?
Declare global a variable, clickcount then increment it whenever running myFunction.
On more thing you should remind is keeping comment between script tag avoiding some parsing errors among browsers like firefox, chrome, IE etc.
Here is my solution for you.
<!DOCTYPE html>
<html>
<body>
<h1>Mathematics Review</h1>
<p>Click Below For a Quick Review:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">Please Take Notes!</p>
<script language="JavaScript">
<!--
var clickcount = 1;
function myFunction() {
document.getElementById("demo").innerHTML = "Question #" + clickcount++;
}
-->
</script>
</body>
</html>
And, You can use a setInterval function, if you want some effect like auto increment the number at some period of time.
Here is another one with 10 iteration every time you just click the button.
<!DOCTYPE html>
<html>
<body>
<h1>Mathematics Review</h1>
<p>Click Below For a Quick Review:</p>
<button type="button" onclick="try10Iter()">Click Me!(10 iteration)</button>
<button onclick="myVar = setTimeout(try10Iter, 500)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>
<p id="demo">Please Take Notes!</p>
<script language="JavaScript">
<!--
var clickcount = 1;
var countVar;
function stopIterAt(condition)
{
if(clickcount == condition)
{
clearInterval(countVar);
clickcount = 0;
}
}
function myFunction() {
document.getElementById("demo").innerHTML = "Question #" + clickcount++;
stopIterAt(11)
}
function try10Iter()
{
countVar = window.setInterval(myFunction, 500);
}
-->
</script>
</body>
I borrowed some code from the site.
Regards,
You could add <br> tags to your innerHTML value:
document.getElementById("demo").innerHTML = "Question #1<br>Question #2<br>Question #3<br>Question #4";
var count = 1;
function myFunction() {
document.getElementById("demo").innerHTML += "<br/>Question #"+(count++);
}
<h1>Mathematics Review</h1>
<p>Click Below For a Quick Review:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">Please Take Notes!</p>
You can use:
document.getElementById("demo").innerHTML += "<br/>Question #" + ++question;
where question is a global variable initialized to zero - see demo below:
var question = 0;
function myFunction() {
document.getElementById("demo").innerHTML += "<br/>Question #" + ++question;
}
<h1>Mathematics Review</h1>
<p>Click Below For a Quick Review:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">Please Take Notes!</p>
Related
My code is supposed to change the text of a paragraph.
The code- (both .js and .html files)
<!DOCTYPE html>
<html>
<head>
<title>Java's Crypt</title>
</head>
<body>
<p Id="bello">i will change</p>
<button type="button" onclick="myFunction()">click to change</button>
<script src="crypt.js"></script>
</body>
</html>
(javascript file)
function myFunction() {
document.getElementById("bello").innerhtml = "toldya";
}
First there is id not Id in HTML
<p id="bello">i will change</p>
and in JS, You can use textContent or innerText to change text
document.getElementById("bello").textContent = "toldya";
function myFunction() {
document.getElementById("bello").textContent = "toldya";
}
<p id="bello">i will change</p>
<button type="button" onclick="myFunction()">click to change</button>
As per Jax-p's comment, document.getElementById("bello").innerText = "toldya"; should work.
Also, it is best practice to use lower case for your html attributes e.g. Id should just be id
I am looking for the JavaScript code that can assist me in getting something similar to the button onclick event. Please take a look at the code below.
Javascript code
<script type='text/javascript'>
function myPopup() {
var overlay = $('<div id="overlay"></div>');
$('.x').click(function() {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
var obj = document.getElementsByClassName('clickLink');
// alert("name");
myScript = function() {
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
return false;
};
obj[0].addEventListener("click", myScript);
}
</script>
HTML Code
<div class='popup'>
popup content here
</div>
<div id='container'>
<button class='clickLink'>
Click Here to See Popup!
</button>
<!-- this is working 5ne i called class in javascript -->
<button type="submit" onclick='myPopup();'>
Click Here to See Popup!
</button>
<!-- but developers need like onclick event -->
</div>
</body>
This popup script is working fine but I need an onclick event like button onClick='myfunction()'
please any one help me Thanks
If I understand correctly you want to know how onclick event works in JavaScript, if that is the case as your question is not entirely clear, try something to the effect of the following:
<!DOCTYPE html>
<html>
<body>
<p>Click "Try it" to execute the displayDate() function.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").onclick = displayDate;
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
newbie to java script , I want to do like when any one click on first Button,then second button is disabled for 30 seconds , after the enabled of second button, click on second button and third button visible to the user. I know simple disable enable buttons on tutorials Thanks.
<!DOCTYPE html>
<html>
<body>
<input type="button" id="myBtn" value="My Button">
<p>Click the button below to disable the button above.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("myBtn").disabled = true;
}
</script>
</body>
</html>
Use setTimeout function to do it.
<script>
function myFunction() {
document.getElementById("myBtn").disabled = true;
setTimeout(function(){
document.getElementById("myBtn").disabled = false;
}, 5000);
}
</script>
Hope it works.
Use setTimeout() function and variables to flag click status:
setTimeout("myFunction();", 30000);
see this plunker http://embed.plnkr.co/ZUmGoGEr2TYHlfPhUJgK/preview
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<input type="button" id="myBtn" value="My Button" onclick="document.getElementById('thirdBtn').style.display='block'">
<input type="button" style="display:none;" id="thirdBtn" value="Third Button">
<p>Click the button below to disable the button above.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById('thirdBtn').style.display='none';
document.getElementById("myBtn").disabled = true;
setTimeout(function(){
document.getElementById("myBtn").disabled = false;
}, 30000);
}
</script>
</body>
</html>
I have a simple html page
<body>
<button type="button" id="button1" onclick="foo()">Result!</button>
<script type="text/javascript">
function foo() {
var button = document.getElementById("button1");
}
</script>
</body>
I want to change the button title on click.
The title might include HTML tags and I want it to be presented as is (without formatting).
I've tried the way suggested in this post and it works great for a regular text. Unfortunately it formats the HTML tags and doesn't present the non-formatted text:
<body>
<button type="button" id="button1" onclick="foo()">Result!</button>
<script type="text/javascript">
function foo() {
var button = document.getElementById("button1");
button.innerHTML = "<strong>my text</strong>"
}
</script>
</body>
To be clear, I want the title to be <strong>my text</strong> and not my text.
So what is the right way to present a non-formatted text inside the button?
The innerText attribute will do the work:
<body>
<button type="button" id="button1" onclick="foo()">Result!</button>
<script type="text/javascript">
function foo() {
var button = document.getElementById("button1");
button.innerText = "<strong>my text</strong>"
}
</script>
</body>
Note: Firefox doesn't support innerText, but has its own property called textContent, which can be used instead.
Try to open jsfiddle.net/3hjLb/1/ then click on "Try it" wait until the 0 and click "Try it" and see happen,
How do the "0" it could go back to 10 if you click on "Try it" a second time?
try to set counter value in onclick event : DEMO
<button onclick="counter = 10;countDown()">Try it</button>
reset your counter variable to 10 before call onclick function
like this
<button onclick="javascript:counter=10; countDown()">Try it</button>
See JS Fiddle
using "if" condition is one option:
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bla! </title>
<script type='text/javascript'>
var counter = 10;
function CountDown(obj) {
if (--counter < 0) counter = 10;
obj.innerHTML = "counter=" + counter;
}
</script>
</head>
<body>
<button onclick='CountDown(this)'> Click to countdown (10) </button>
</body>
</html>