I am trying to pass a few different cases through a function
<div id="button1" class="button" onclick="pop(case1)">popup a</div>
and then i want to create different cases in my function
function pop(a){
if (a='case1') {var mytext = "you pressed the popup case1"; var myclass=a;}
else if (a='case2'){var mytext = "you pressed the popup case2"; var myclass=a;}
else if (a='case3'){var mytext = "you pressed the popup case3"; var myclass=a;}
var p1 = document.createElement("div");
p1.classname =myclass;
p1.innerHTML=mytext;
document.body.appendChild(p1);
}
here is a fiddle i made for it
http://jsfiddle.net/alexnode/WqsNJ/1/
How should i create the conditional if else properly? Currently i get always case1 popup.
The problem is you are assigning with = rather than checking with ==, change your ='s to =='s.
http://jsfiddle.net/WqsNJ/2/
if (a=='case1') {var mytext = "you pressed the popup case1"; var myclass=a;}
else if (a=='case2'){var mytext = "you pressed the popup case2"; var myclass=a;}
else if (a=='case3'){var mytext = "you pressed the popup case3"; var myclass=a;}
In order to compare strings in JavaScript, you need to use the is equal to operator (==) instead of the equals sign (=).
So the correct code should be
function pop(a){
if (a=='case1') {var mytext = "you pressed the popup case1"; var myclass=a;}
else if (a=='case2'){var mytext = "you pressed the popup case2"; var myclass=a;}
else if (a=='case3'){var mytext = "you pressed the popup case3"; var myclass=a;}
var p1 = document.createElement("div");
p1.classname =myclass;
p1.innerHTML=mytext;
document.body.appendChild(p1);
}
Related
<script>
var sum = 0;
var pressYet = false;
function changeIt() {
if(pressYet == false){
sum++;
document.getElementById('test').innerHTML = sum;
pressYet = true;
} else {
document.getElementById('test').innerHTML = "You have already pressed the button";
document.getElementById("button").style.visibility = "hidden";
}
}
</script>
<div id="test">
<b> <var> Test </ var> </b>
</div>
<button onclick="changeIt()" id = "button" >Press If you are here</button>
SO I have this sweet epic button on my website, its very cool, but I want to make it better. I was wondering how to make the variable 'sum' not reset every time I refresh my website. I know there's a term for that but for the life of me I cannot figure it out. I want it so every time someone presses the button, 'sum' gets added one to it and that number would be permanent. So over time that number gets very large.
I am very new to HTML so please be kind to me.
You can save the value to localStorage and then retrieve it from localStorage after page load. Then on the basis of the data you can adjust the page. I have slightly modified your code here
var sum = 0;
var pressYet = localStorage.getItem('pressYet');
function changeIt() {
if (pressYet == null) {
sum++;
document.getElementById('test').innerHTML = sum;
pressYet = true;
localStorage.setItem('pressYet', pressYet);
} else {
document.getElementById('test').innerHTML = "You have already pressed the button";
document.getElementById("button").style.visibility = "hidden";
}
}
(function init() {
if (localStorage.getItem('pressYet') != null || localStorage.getItem('pressYet') != "") {
document.getElementById('test').innerHTML = "You have already pressed the button";
document.getElementById("button").style.visibility = "hidden";
}
})();
<div id="test">
<b> <var> Test </ var> </b>
</div>
<button onclick="changeIt()" id="button">Press If you are here</button>
You can check out the demo https://jsfiddle.net/5jyrk6s8/
I am working on a browser button style game, but when i get to a certain point there is a dead button, and i cannot find any problems with it
function L2right1() {
if(hasSword == true){
q.innerHTML = "You walk down the hall";
option1.setAttribute("onclick","stabwall1()");
option1.innerHTML = "Keep walking";
option2.setAttribute("onclick", "goback1()");
option2.innerHTML = "Go back";
}
if(hasSword == false){
q.innerHTML = "You end up in a small room with nothing but a hole in the wall.";
option1.setAttribute("onclick","goback1()");
option1.innerHTML = "Go back";
option2.setAttribute("onclick", "trylookaround()");
option2.innerHTML = "Look around";
}
}
function stabwall1() {
if(opendoor == true){
q.innerHTML = "burp";
option1.setAttribute("onclick","continue2()");
option1.innerHTML = "Enter the room";
option2.setAttribute("onclick", "goback1()");
option2.innerHTML = "Go back";
}
if(opendoor == false){
q.innerHTML = "You end up in a small room with nothing but a hole in the wall. it looks like you daggar may fit in it";
option1.setAttribute("onclick","goback1()");
option1.innerHTML = "Stab wall ig";
option2.setAttribute("onclick", "goback1()");
option2.innerHTML = "Go back";
}
when i run this, the button simply will not work, and if i reference another function, it works.
is there a problem here or is it something wrong with the variable perhaps? in that case, i could send the full code
I want to have a repeat function around this bit of Javascript code:
<SCRIPT language="JavaScript">
var usernamecheck="username";
var passcheck="password";
var username=prompt ('Enter Username',' ');
var password=prompt ('Enter Password',' ');
if
(username+password==usernamecheck+passcheck) ;
else
{window.location="http://www.google.com";}
</SCRIPT>
I want this bit of code to repeat 3 times if the user inputs an incorrect username or password in.
I would also want to inform the user that the password or username they have entered is incorrect and tell them to try again. When they have already had 3 tries they will then be sent to another webpage e.g."http://www.google.com" .
How would I do this? (Please help)
Can't you just use a for loop?
For example:
<SCRIPT language="JavaScript">
var usernamecheck="username";
var passcheck="password";
var username=prompt ('Enter Username',' ');
var password=prompt ('Enter Password',' ');
//create a counter var
var counter = 3;
//Next create a for loop to loop 3 times then if still the credidentials
//are incorrect then send user to google.com
for (var i = 0; i < counter; i++){
if {
(username+password==usernamecheck+passcheck) ;
//put in code to terminate loop
}
else
var username=prompt ('Enter Username',' ');
var password=prompt ('Enter Password',' ');}
}
window.location="http://www.google.com";
</SCRIPT>
I agree with everyone else that this is not a good means of site protections, also I am not familiar with javascript language (I program in Java) but it seems familiar enough.
Also check the logic like someone else stated above
I have solved it myself! using the answer of Biochemist_HK and making it work:
var usernamecheck="name";
var passcheck="password";
var username=prompt ('Enter Username',' ');
var password=prompt ('Enter Password',' ');
//create a counter var
var counter = 2;
//Next create a for loop to loop 3 times then if still the credidentials
//are incorrect then send user to google.com
for (var i = 0; i < counter; i++){
if
(username+password==usernamecheck+passcheck);
else {
alert("The username or password you have entered is incorrect. Please try again.");
var username=prompt ('Enter Username',' ');
var password=prompt ('Enter Password',' ');
}
}
if
(username+password==usernamecheck+passcheck);
else //tells user that the username or password they have entered is wrong and will be sent to google.co.nz
{alert("The username or password you have entered is incorrect. You will now be directed to another webpage.");
{window.location="http://www.google.co.nz"};};
Thanks for the ones who replied. :)
I am having a problem setting/getting a hidden input's value with JavaScript, and can't see what I'm doing wrong.
What I am basically trying to do is maintain the state of expandable/collapsable divs on my page across form submissions. So I put a hidden input on the page to hold the state of the divs. When a div is expanded/collapsed, I change the value of the input. When the page loads, I read the value of the input and set the state of the divs.
But the value of the input is getting lost. I verify through alerts that it is being set correctly, and then when I read it on load, I verify with an alert that it is empty. Here is the pertinent code:
<input type="hidden" name="ECState" id="hdnECState" />
<script language="javascript" type="text/javascript">
<!--
var ecValue;
function ec(div, btn) {
//expands or collapses an error detail div
var e = document.getElementById(div);
var b = document.getElementById(btn);
var ecStr = div.toString() + ',' + btn.toString() + '|'
if (e.style.display == 'block') {
e.style.display = 'none';
b.src = '../../Images/plus.gif';
ecValue = ecValue.replace(ecStr, '');
}
else {
e.style.display = 'block';
b.src = '../../Images/minus.gif';
ecValue = ecValue + ecStr;
}
alert(ecValue);
document.getElementById('hdnECState').value = ecValue;
}
function reexpand() {
//restores the expanded state of the error detail divs
var pipe, comma, db, div, btn, e, b;
var n = document.getElementById('hdnECState').value;
alert('n=' + n);
if (n != '') {
pipe = n.indexOf('|');
while (pipe > 0) {
db = n.substring(0, pipe);
comma = db.indexOf(',');
if (comma > 0) {
div = db.substring(0, comma);
btn = db.substring(comma + 1);
e = document.getElementById(div);
b = document.getElementById(btn);
e.style.display = 'block';
b.src = '../../Images/minus.gif';
}
n = n.substring(pipe+1);
pipe = n.indexOf('|');
}
}
}
reexpand();
//-->
</script>
When I expand a div, I see the alert from ec() showing that ecValue is 'foo,bar|'.
But after submitting the form, I see the alert from reexpand() saying 'n='.
Anybody see what I'm missing?
You haven't posted Html part of your code. So I am a bit confused, But I think you should put some value first.
<input type="hidden" name="ECState" id="hdnECState" value="1" />
Rudu supplied the answer in a comment, but since I can't mark a comment as the answer, here it is:
I was forgetting that hidden inputs don't automatically keep their value in ViewState across form submissions. I needed to re-value the hidden input on the back end in page load and then everything worked fine.
I wanted to display a different message in the same <div> when the user makes a selection from a radio button. It works, but it's not as clean as I'd like. Here's the code:
<script type="text/javascript">
function showhide(t) {
var target = document.getElementById('bankingdetails');
if (target.style.display == 'none') {
var text = 'Please effect payment to the following account:<br />';
var accountnum = 'Account Number: 39485620346<br />';
var branchcode = 'Branch Code: 34985<br />';
var branchname = 'Branch: F00 Bank Whoville';
if (t == 0) {
// User opted for Online Payment
target.style.display = 'block';
target.innerHTML = 'Please click here to go to PayPal:<br />Go to PayPal';
} else {
target.style.display = 'block';
target.innerHTML = text + accountnum + branchcode + branchname;
};
} else {
target.style.display = 'none';
};
};
</script>
<input type="radio" name="radPayment" onclick="showhide(0);" />Pay Online
<input type="radio" name="radPayment" onclick="showhide(1);" />EFT
Right now, I can click either radio button to display it's message, but... I have to click it again, or click on the other one to hide the visible message.
What I'd like is to change the text that displays on the page so that if the EFT text is visible, if I click on the Pay Online button, the text will change immediately.
Thanks in advance!
If I understand you correctly, clicking multiple times causes the div to hide/show. You can solve this by checking always the given parameter t:
<script type="text/javascript">
function showhide(t) {
var target = document.getElementById('bankingdetails');
var text = 'Please effect payment to the following account:<br />';
var accountnum = 'Account Number: 39485620346<br />';
var branchcode = 'Branch Code: 34985<br />';
var branchname = 'Branch: F00 Bank Whoville';
switch(t)
{
case 0:
// User opted for Online Payment
target.style.display = 'block';
target.innerHTML = 'Please click here to go to PayPal:<br />Go to PayPal';
break;
case 1:
target.style.display = 'block';
target.innerHTML = text + accountnum + branchcode + branchname;
break;
default:
target.style.display = 'none';
}
};
</script>