Develop Reference

Adding a click event to hide a popup

I have a popup with an id of myPopup.
show is a class that changes the display from none to block.
This is my first time using event handlers and I was looking to get some information on the different types and how to use them.
var popup_v = document.getElementById("myPopup");
function popup() {
popup_v.classList.toggle("show");
}
if(document.getElementById('myPopup').classList.contains("show")) {
document.addEventListener('click', function(event) {
popup_v.classList.remove("show");
});
}

var popup_v = document.getElementById("myPopup");
function popup() {
popup_v.classList.toggle("show");
}
if(document.getElementById('myPopup').classList.contains("show")) {
document.addEventListener('click', function(event) {
popup_v.classList.remove("show");
});
So first of all your if statement will only run once and since the class is only toggled during the function, then the if statement will never be run and so the event won't actually happen.
To fix this maybe try this approach:
var popup_v = document.getElementById("myPopup");
var trueorfalse = false;
function popup() {
if (trueorfalse === false) }
trueorfalse = true; // popup is there
popup_v.classList.toggle("show");
} else {
popup_v.classList.remove("show");
}
}
if(document.getElementById('myPopup').classList.contains("show")) {
document.addEventListener('click', function(event) {
popup_v.classList.remove("show");
});
OR
var popup_v = document.getElementById("myPopup");
function popup() {
popup_v.classList.toggle("show");
}
var trueorfalse = false;
document.addEventListener('click', function(event) {
if (trueorfalse === false) }
trueorfalse = true; // popup is there
popup_v.classList.toggle("show");
} else {
popup_v.classList.remove("show");
}
}
};
I did it these ways because the event listener just checks if the event is happening for how long the application (site) is run.
So you can just check if the class is there or not and then decide depending on that.
Tell me if anything is wrong.

I don't see a need to add the if condition specifically to check if it contains class and it it has remove it.
the toggle method should do both for you, i.e.
on toggle add show class,
on toggle again if show class is present remove it
check this example for reference - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_class

Why does jQuery click event only work once?

I am trying make speed units toggle when clicking. However, this only works once. I have run out of things to try. I also tried .click(), .live(), .toggle() (which only made it disappear and reappear), etc.
HTML:
<li id="wind">Wind speed</br>
<p class='windSpeedKm'></p>
</li>
Javascript:
var click = true;
$('#wind').on('click', function() {
if (click = false) {
$('#wind').html(function() {
$(this).html("Wind speed<br>" + windKm);
click = true;
});
} else if (click = true) {
$('#wind').html(function() {
$(this).html("Wind speed<br>" + windMi);
click = false;
});
}
});

This isn't exactly what you asked for, but this will save you so much time it is unbelievable. It has an auto convert function built in so you don't have to manually update both numbers. It doesn't replace unnecessary to replace html.
<li id="wind">Wind speed</br>
<p class='windSpeedKm' km="500">500</p>
</li>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
function toMiles(km) {
return parseFloat(km) * 0.62137;
}
$('#wind').on('click', function() {
console.log($(this).attr("km"));
windSpeedKm = $(this).find(".windSpeedKm");
km = windSpeedKm.attr("km");
if (km === windSpeedKm.html()) {
windSpeedKm.html(toMiles(km));
} else {
windSpeedKm.html(km);
}
});
</script>

There are a few syntax issues with the code:
var click = true;
$('#wind').on('click', function() {
if (click) {
$(this).html("Wind speed<br>" + windKm):
click = true;
} else {
$(this).html("Wind speed<br>" + windMi);
click = false;
}
});
Note: there isn't any need to set click = true or click = false in your example as falling into the if statement by checking the click assignment value, this will already be true! You would only do this if you wanted to toggle the boolean to false after confirming it was true.

click = true should be click == true;

how to enable or disable a button on keypress event of a textbox in javascript

I created a TextBox :-
TextBox ID="TxtUname" onKeyPress="ENABLE_BTN()"
Now i wrote a function :-
script type="text/javascript"
window.onload = function() {
document.getElementById('SSAccept').disabled = true;
};
function ENABLE_BTN() {
var EN=document.getElementById('TxtUname').value;
if(EN=='') {
document.getElementById('SSAccept').disabled=true;
} else {
document.getElementById('SSAccept').disabled=false;
}
}
</script>
BUT STILL THE DISABLED BUTTON IS NOT GETTING ENABLED ON PRESSING ANY KEY IN THE TEXTBOX.
Can anyone tell me what i did wrong ?? Thanks in Advance
Dev..

onkeypress doesn't work in all browsers -> http://www.quirksmode.org/js/keys.html
onkeyup / onkeydown should be used ->
Working example : http://jsfiddle.net/KCBzk/
HTML :
<input id="TxtUname" value="" onkeydown="ENABLE_BTN()"/><br>
<button id="SSAccept">Some test</button>
Javascript:
window.onload = function() {
document.getElementById('SSAccept').disabled = true;
}
function ENABLE_BTN() {
var EN=document.getElementById('TxtUname').value;
if(EN=='') {
document.getElementById('SSAccept').disabled=true;
} else {
document.getElementById('SSAccept').disabled=false;
}
}

the thing is that you need an event to invoke that function. you should monitor your textbox for change and invoke the function whenever the value changes. like using jquery
$("#TxtUname").keydown(function(e) {
if($("#TxtUname").val == '') {
//..disable button..
} else {
//..enable button
}
});

How to show <tr> tag on clicking button and prevent page refresh

My Requirement is to hide a tag initially, if user clicks forwardbutton without checking any radio or checkbutton we have show the tag and have to prevent page refresh. But it is permanently not submitting on click, Plese someone help me.
$(document).ready(function()
{
var y=$('input').filter(':checked').length;
alert(y);
if(y == 0 )
{
$('#Q1_7_label').parents('TR').hide();
}
$('#forwardbutton').live('click',function(event)
{
var x=$('input').filter(':checked').length;
if(x==0)
{
$('#Q1_7_label').parents('TR').show();
return false;
}
});
});

$('#forwardbutton').live('click',function(event)
{
var x=$('input').filter(':checked').length;
if(x==0)
{
$('#Q1_7_label').parents('TR').show();
return false;
}
return true;
});
Just add return true at the end of the function

Try to replace
return false;
with
event.preventDefault();

Javascript:Block form submit on Enter Key press

I have a web page where i have 2 forms when i click the enter key, I am calling a javascript function to force the page to load another page.My code is
function SearchUser()
{
var text = document.getElementById("searchItem").value;
text = text == "" ? -1 : text;
var by = document.getElementById("listBy").value;
var on="";
if(by==1)
{
on="USERNAME";
}
else if(by==2)
{
on="FIRSTNAME";
}
else if(by==3)
{
on="EMAIL_ID";
}
gotoUrl="userlist.php?searchItem="+text+"&onSearch="+on;
alert(gotoUrl);
window.navigate=gotoUrl;
}
and
$(document).ready(function()
{
$("#frmUserListSearch").keyup(function(event)
{
if(event.keyCode == 13)
{
SearchUser();
}
});
});
But the page is doing a form submit when the SearchUSer function being called.I am getting the correct url in the alert.But The page is not loading in the brower
Any Ideas ???
Thanks in advance

if (document.addEventListener) {
document.getElementById('strip').addEventListener('keypress',HandleKeyPress,false);
} else {
document.getElementById('strip').onkeypress = HandleKeyPress;
}
function HandleKeyPress(e) {
switch (e.keyCode) {
case e.DOM_VK_ENTER:
if (e.preventDefault)
e.preventDefault();
else e.returnValue = false;
}
}
EDIT due to original Question edit:
all you need is:
$(document).ready(function()
{
$("#frmUserListSearch").keyup(function(event)
{
if(event.keyCode == 13)
{
SearchUser();
if (e.preventDefault)
e.preventDefault();
else e.returnValue = false;
}
});
});
edited to reflect comment

Returning false often does the trick.
http://javascript.about.com/library/bldisdef.htm

I have two recommendations. First, use the keydown event instead of keyup (it catches "enter" before submit better). Second, in your SearchUser() function, use window.location instead of window.navigate to go to the other page.
$(document).ready(function() {
$("#frmUserListSearch").keydown(function(event) {
if(event.keyCode == 13){
SearchUser();
return false;
}
});
});
NOTE: Don't forget to remove the "alert()" inside the SearchUser() function as it causes the form to submit before navigating away from the page.

You can do this by using the action attribute of the form, without having to deal with key events, granted that you will later need javascript to take action on the control that submits the form.
<html>
<head>
<script type="text/javascript">
function donothing() {}
</script>
<body>
<form action='javascript:donothing()'>
...
</form>
</body>
</html>