events javascript - javascript

I need to display a message on mouse click. But I also need another message to be displayed on the next mouse click. The problem is that in my code both messages appear on the first mouse click.
<!DOCTYPE>
<html>
<head>
<script>
function myfunction()
{
var obj=document.getElementById("msg1");
obj.innerHTML="message1";
if(obj.innerHTML=="message1")
{
var obj1=document.getElementById("msg2");
obj1.innerHTML="message2";
}
}
</script>
</head>
<body>
<div id="msg">
<form name="myform">
<input type="button" value="click" onclick="myfunction()">
<p id="msg1"></p>
<p id="msg2"></p>
</form>
</div>
</body>
</html>

<script>
var flag=0;
function myfunction()
{
if (flag==0)
{
var obj=document.getElementById("msg1");
obj.innerHTML="message1";
flag=1;}
else
{
var obj1=document.getElementById("msg2");
obj1.innerHTML="message2";
}
}
</script>

if (obj.innerHTML == "message1") {
var obj1 = document.getElementById("msg2");
obj1.innerHTML = "message2";
}else{
obj.innerHTML = "message1";
}
Your if would always execute because you were trying to check if obj.innerHTML == "message1" immediately after setting it to that.

Do you see that you set the innerhtml of obj to "message1" and then immediately after you check if the innerHTML is "message1" that will always be true.
You need to change the if. So it says:
if(obj.innterHTML=="message1"){
obj.innerHTML="message2";
} else {
obj.innerHTML="message1";
}

Similar to others, but what the heck:
var obj1 = document.getElementById('msg1');
var obj2 = document.getElementById('msg2');
if (obj1.innerHTML == '') {
obj1.innerHTML = 'message1';
} else {
obj2.innerHTML = 'message2';
}

function myfunction() {
var i, ele;
for(i = 1; i <= 2; i++) {
ele = document.getElementById("msg"+i);
if (ele && ele.innerHTML.length == 0) {
ele.innerHTML = 'message' + i;
return;
}
}
}

Just add a click counter to check it was first click or more then first.
<!DOCTYPE>
<html>
<head>
<script>
var $clickCount = 0;
function myfunction() {
$clickCount++;
var obj = document.getElementById("msg1");
obj.innerHTML = "message1";
if (obj.innerHTML == "message1") {
var obj1 = document.getElementById("msg2");
if ($clickCount == 2) {
obj1.innerHTML = "message2";
}
}
}
</script>
</head>
<body>
<div id="msg">
<form name="myform">
<input type="button" value="click" onclick="myfunction()">
<p id="msg1"></p>
<p id="msg2"></p>
</form>
</div>
</body>
</html>

Related

Event if I press button x times

I have this JS / HTML code. It is supposed to give you an input. When you click the button as many times as you wrote in the input then it the screen is supposed to say 'stop' but that's not happening and idk why. How can I fix this?
var text2
let count = 1;
var correct = 1;
function check() {
text2 = document.getElementById('questions').value;
correct = correct + 1;
count = count + 1;
if (count === text2) {
var score = "stop";
document.getElementById('div').innerHTML = score;
}
}
<p>how many?<input type="text" id="questions"></p>
<button onclick="check()" id='but'>ok</button>
<div id='div'></div>
Refactor your code like this:
<html>
<body>
<p>how many?<input type="text" id="questions"></p>
<button onclick="check()" id='div'>ok</button>
<div id='div'> </div>
<script>
var count = 0;
function check() {
let user_input = document.getElementById('questions').value;
if (++count === parseInt(user_input)) {
document.getElementById('div').innerHTML = "stop";
}
}
</script>
</body>
</html>
This shoud do the trick:
<html>
<body>
<p>how many?<input type="text" onInput="onInput()" id="questions"></p>
<button onclick="check()" id = 'but'> ok </button>
<div id = 'div'> </div>
<script>
var text2;
let count = 0
function onInput() {
var element = document.getElementById('questions');
//replace window
text2 = element.value;
}
function check(){
count = count + 1;
console.log(count);
if (count === parseInt(text2)){
var score = "stop";
document.getElementById('div').innerHTML = score;
}
}
</script>
</body>
</html>
You are using === to compare, which checks type before comparing. count is an integer and text2 is a String, so it will always return false. Instead, first parse text2 into an integer, then compare like so:
<html>
<body>
<p>how many?<input type="text" id="questions"></p>
<button onclick="check()" id='but'> ok </button>
<div id='div'> </div>
<script>
var text2
let count = 0;
var correct = 0;
function check() {
text2 = document.getElementById('questions').value;
correct = correct + 1;
count++;
if (count === parseInt(text2)) {
var score = "stop";
document.getElementById('div').innerHTML = score;
}
}
</script>
</body>
</html>
Or instead use == which only checks for value:
<html>
<body>
<p>how many?<input type="text" id="questions"></p>
<button onclick="check()" id='but'> ok </button>
<div id='div'> </div>
<script>
var text2
let count = 0;
var correct = 1;
function check() {
text2 = document.getElementById('questions').value;
correct = correct + 1;
count++;
if (count == text2) {
var score = "stop";
document.getElementById('div').innerHTML = score;
}
}
</script>
</body>
</html>

Trying to print out a input text the number of times the user wrote in the secound input using a while loop

I have two input fields and a button. When the user clicks the button, I want it to display the text the user wrote in the first input the amount of times the user wrote in the second input.
I understand you have to use a while loop for this. What am I doing wrong here?
<!DOCTYPE html>
<html>
<head>
<title>While Loop</title>
<script type="text/javascript">
window.onload = btn;
function btn() {
document.getElementById("btn").onclick = showText;
}
function showText() {
var text = "";
var inputOne = document.getElementById("txtBox").value;
var inputTwo = document.getElementById("numBox").value;
while (inputOne < inputTwo) {
text += inputOne;
inputOne++;
}
document.getElementById("showCode").innerHTML = text;
}
</script>
</head>
<body>
<input type="text" id="txtBox"><br/>
<input type="number" id="numBox"><br/>
<button type="button" id="btn">Click Me!</button>
<p id="showCode"></p>
</body>
</html>
Since inputOne is a text, you cannot increment it (you can't do inputOne++), instead, use another variable, let's call it i, to control the while loop:
window.onload = btn;
function btn() {
document.getElementById("btn").onclick = showText;
}
function showText() {
var text = "";
var inputOne = document.getElementById("txtBox").value;
var inputTwo = document.getElementById("numBox").value;
var i=1; // to control the loop
while (i <= inputTwo) { // i goes from 1 to inputTwo
text += inputOne;
i++;
}
document.getElementById("showCode").innerHTML = text;
}
<input type="text" id="txtBox"><br/>
<input type="number" id="numBox"><br/>
<button type="button" id="btn">Click Me!</button>
<p id="showCode"></p>
This is my solution
<!DOCTYPE html>
<html>
<head>
<title>While Loop</title>
<script type="text/javascript">
window.onload = btn;
var count = 0;
function btn() {
document.getElementById("btn").onclick = showText;
}
function showText() {
var text = "";
console.log("Text: "+text);
var inputOne = document.getElementById("txtBox").value;
console.log("Input One: "+inputOne);
var inputTwo = document.getElementById("numBox").value;
console.log("Input 2: "+inputTwo);
count=count+1;
console.log("Times: "+count);
document.getElementById("numBox").value = count;
document.getElementById("showCode").innerHTML = text;
}
</script>
</head>
<body>
<input type="text" id="txtBox"><br/>
<input type="number" id="numBox"><br/>
<button type="button" id="btn">Click Me!</button>
<p id="showCode"></p>
</body>
</html>
Instead of the while loop you can use a for loop like this:
for( let i = inputTwo; i>0; i--) {
text += inputOne;
}

HTML Button Count

Im trying to implement a logic whereby each time I click the button the count alternates between 1 and 0. In the following code the count is always 0 as each time I press the button the function sets the count to 0. Please help me out and thanks in advance
<html>
<head>
<script type="text/javascript">
function main(){
var button = document.getElementById('button');
count = 0;
if(button.onclick && count == 0){
alert(count);
count = 1;
}
else if(button.onclick && count == 1){
alert(count);
count = 0;
}
}
</script>
</head>
<body>
<button type="button" id="button" onclick="main()">Click Me!</button>
</body>
</html>
Declare count variable at global scope.
<html>
<head>
<script type="text/javascript">
var count = 0;
function main(){
var button = document.getElementById('button');
if(button.onclick && count == 0){
alert(count);
count = 1;
}
else if(button.onclick && count == 1){
alert(count);
count = 0;
}
}
</script>
</head>
<body>
<button type="button" id="button" onclick="main()">Click Me!</button>
</body>
</html>
Declare the button in global scope. And use the bitwise operator for toggling between 0 and 1 like this..
<script type="text/javascript">
var count = 0; //global scope
function main(){
var button = document.getElementById('button');
if(button.onclick){
alert(count);
count ^= 1; //bitwise operator
}
}
</script>
^ (Bitwise XOR) as a I/O toggler
each time you click the button, main() is called. and each time you call main() you're setting count to 0 to start. Place count outside your function scope.
I agree with Ataur's answer but you might want to consider a bool for this use case as best practise.
<html>
<head>
<script type="text/javascript">
var buttonIsOn = true;
function main(){
var button = document.getElementById('button');
if(button.onclick && buttonIsOn){
alert("turning button off");
buttonIsOn = false;
}
else { // no need to check again if using bool
alert("turning button on");
buttonIsOn = true;
}
}
</script>
</head>
<body>
<button type="button" id="button" onclick="main()">Click Me!</button>
</body>
</html>
You should set the count to 0 outside of the function.
<html>
<head>
<script type="text/javascript">
var count = 0;
function main(){
var button = document.getElementById('button');
if(button.onclick && count == 0){
alert(count);
count = 1;
}
else if(button.onclick && count == 1){
alert(count);
count = 0;
}
}
</script>
</head>
<body>
<button type="button" id="button" onclick="main()">Click Me!</button>
</body>
</html>
You need to hook click event with button and alternate between 0 & 1 on click.
function main() {
var button = document.getElementById('button');
var count = 0;
button.addEventListener("click", function() {
if (count == 0) {
alert(count);
count = 1;
}
else if (count == 1) {
alert(count);
count = 0;
}
});
}
Further make sure that main function is called on when document is in ready state or put function call to main right above closing of body tag. Something like this
<body>
<button type="button" id="button" >Click Me!</button>
<script>
main();
</script>
</body>

HTML captcha submit verifying not working

Codeļ¼š
<html>
<body>
<script>
window.onload = function () {
var do_not_drag = document.getElementsByClassName('no_select');
for (var i = 0; i < do_not_drag.length; i++) {
disableSelection(do_not_drag[i]);
}
};
function disableSelection(element) {
if (typeof element.onselectstart != 'undefined') {
element.onselectstart = function () {
return false;
};
} else if (typeof element.style.MozUserSelect != 'undefined') {
element.style.MozUserSelect = 'none';
} else {
element.onmousedown = function () {
return false;
};
}
}
function generateCaptcha() {
var captchaForRead = document.getElementById('captchaForRead');
var captchaForReadInnerHTML = Math.floor(Math.random() * 9000) + 1000
captchaForRead.innerHTML = captchaForReadInnerHTML;
captchaCorr = captchaForReadInnerHTML;
}
function verifyCaptcha(captchaInput) {
if (captchaInput == captchaCorr) {
document.write("Correct!")
}
}
</script>
<form onsubmit="verifyCaptcha(this.form.captchaInput.value);">
<p id="captchaForRead" class="no_select"></p>
<input type="text" name="captchaInput">
<input type="submit" value="submit">
</form>
<script>
generateCaptcha();
</script>
</body>
</html>
This is not working. What can i do? even after i inserted the correct captcha, nothing happened.
What can i do??? I've checked the javascript and html but still cannot find the problem.
Pls help.
Try this:
function verifyCaptcha(captchaInput){
console.log(captchaInput);
if (captchaInput==captchaCorr){
console.log('Correct');
}
}
<form onsubmit="verifyCaptcha(this.captchaInput.value);">
<p id="captchaForRead" class="no_select"></p>
<input type="text" name="captchaInput">
<input type="submit" value="submit">
</form>

how to do a printer-like text field using javascript OOP

I'm doing a printer-like text field which could show the letter one by one. I could realize it just use a function and load it as simple like:
html---
<div id="myTypingText"></div>
js---
<script>
var myString = "Place your string data here, and as much as you like.";
var myArray = myString.split("");
var loopTimer;
function frameLooper() {
if(myArray.length > 0) {
document.getElementById("myTypingText").innerHTML += myArray.shift();
} else {
clearTimeout(loopTimer);
return false;
}
loopTimer = setTimeout('frameLooper()',70);
}
frameLooper();
</script>
But I want to do more advanced, I want to let the user to change the speed and change the text, so I wrote the following one but it went wrong, why? help me .thx.
html----
<div id="myTypingText"></div>
<p>Enter the tempo:</p><input type="text" id="tempo" value="70">
<p>Enter the Text:<p><input type="text" id="text" value="abcdefghijklmn">
<button onclick="begin()">Begin</button>
js----
<script type="text/javascript">
function Printer(){
this.myString = document.getElementById("text").value;
this.myArray = this.myString.split("");
this.tempo = document.getElementById("tempo").value;
this.len = this.myArray.length;
this.loop = function (){
if(this.len > 0 ){
document.getElementById("myTypingText").innerHTML += this.myArray.shift();
}
}
}
function begin(){
var test = new Printer();
setInterval(test.loop,test.tempo);
}
</script>
You need to use an anonymous function in the interval if you want the loop function to be executed in the context of the Printer object. Also you need to check the length of the array each time as the len property won't be updated when the array is shifted.
function Printer() {
this.myString = document.getElementById("text").value;
this.myArray = this.myString.split("");
this.tempo = document.getElementById("tempo").value;
this.loop = function () {
if (this.myArray.length > 0) {
document.getElementById("myTypingText").innerHTML += this.myArray.shift();
}
}
}
function begin() {
var test = new Printer();
setInterval(function () {
test.loop()
}, test.tempo);
}
See the working fiddle
Here's another approach. Your fundamental problem was with using the this keyword. You have to remember that when you enter another function scope, the this keyword changes. You'll notice here that I cache or save 'this' to equal that, then use that new 'that' value in the function. Plunker
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="myTypingText"></div>
<p>Enter the tempo:</p><input type="text" id="tempo" value="70">
<p>Enter the Text:<p><input type="text" id="text" value="abcdefghijklmn">
<button onclick="begin()">Begin</button>
<script type="text/javascript">
function Printer(){
this.myString = document.getElementById("text").value;
this.myArray = this.myString.split("");
this.tempo = document.getElementById("tempo").value;
this.len = this.myArray.length;
var that = this;
this.loop = function (){
if(that.myArray.length !== 0 ){
document.getElementById("myTypingText").innerHTML += that.myArray.shift();
}
}
}
function begin(){
var test = new Printer();
setInterval(test.loop,test.tempo);
}
</script>
</body>
</html>

Categories