Simple "if" statement inside of function not working - javascript

I need help. I am doing a project and am creating a simple survey. The code I have should work. Upon pressing the "yes" button, it should add 1 to the "artscore" variable. Then when I press "submit" it should check if the variable is over 1 and if it says "You are an artist" and if it isn't bigger than 1 it should say "You are something different". However whenever I do this and press submit it always says "You are something different", even when I have clicked "yes" multiple times. It should work but it doesn't. I am a complete beginner and the answer may be very simple. I have made multiple prototypes but I want to figure out how to make a survey this way.
Thank you for any help.
BTW the HTML part of this code got taken away. This website wouldn't let me put it in. This is just the javascript part without the beginning script tag. The beginning HTML just had some buttons which when click ran the two functions. The yes button runs the artFunction function and the submit button runs the submitFunction function. I also don't know why the code below is in two parts. Thanks for any help on why this code doesn't work.
var artscore = 0;
function artFunction(){
artscore = artscore + 1;
}
function submitFunction(){
if (artscore > 1){
alert("You are an artist");
} else {
alert("You are something different");
}
}

I am not completely sure whether this will solve the problem, but the problem may be in the if statement in the submit function. You are currently checking for if artscore is greater than 1, but in your art function you are adding one to artscore. You should instead check for if artscore is greater than or equal to 1. Hope that helps!!

You are missing >=, you are using >, because of > when ever you click Art button first time it is showing "You are something different" message instead of "You are an artist"
var artscore = 0;
function artFunction(){
//console.log(artscore);
artscore = artscore + 1;
}
function submitFunction(){
//console.log(artscore);
if (artscore >= 1){
alert("You are an artist");
} else {
alert("You are something different");
}
}
<div id="wrapper">
<h1>What type of field are you interested in?</h1>
<p>Take this questionnaire to find out!</p>
<h2> ART1 <h2>
<input id="button" type="submit" name="button" onclick="artFunction();" value="Yes"/>
<button type="button">No</button>
<input id="button" type="submit" name="button" onclick="submitFunction();" value="Submit"/>
</div>

I would suggest being more specific with your code i.e.
function submitFunction(){
if (artscore >= 1){
alert("You are an artist");
} else if (artscore < 1){
alert("You are something different");
} else {
alert("An error has occurred!");
}
}

Change
if (artscore > 1)
to
if (artscore >= 1)
and also check if you are calling the funcation.

Related

Radio Button check in vanilla javascript is not working

My radio button checking is not working. Can anyone please help me with this? I
want to check if the radio button is checked or not. if not checked then I want this program to give an alert. But in this program whenever the radio button is not checked I am not getting the alert.
<div>
<label for="gender">Gender: </label>
<input type="radio" name="myRadio"> Male
<input type="radio" name="myRadio"> Female
<input type="radio" name="myRadio"> Other
</div>
The radio button checking function is given below:
function radioCheck(){
var radio = document.forms["myForm"]["myRadio"].value;
for (var i=0; i<radio.length; i++) {
if (radio[i].checked){
break;
}else
{
alert("No radio button is checked");
}
}
}
Okay so this is working code:
function radioCheck(){
const radioList = document.getElementsByName("myRadio")
let notChecked = false;
for(let i = 0; i < radioList.length; i ++){
if(radioList[i].checked){
return;
} else {
notChecked = true;
}
}
if(notChecked){
alert("No radio button is checked")
}
}
radioCheck()
To explain:
first of all you have to get all inputs by using document.getElementsByName because the only one thing that they have the same is name property which is name="myRadio" in this example
second thing I added variable notChecked which is false on initial so when it will go through all inputs and see that one of them is not selected if will show alert
then you just do normal for loop that goes through all elements and checks if they are checked
if one of them is checked it just stops for loop and returns nothing, otherwise it sets notChecked = true
after loop I just check if notChecked value is true and if it is it shows an alert
last and important thing - you have to run this function at least once to execute it so you just add radioCheck() in the end
I also added this part in html <button onclick={radioCheck()} > run again </button>
so after clicking on button "run again" you can use it again (just for test)
here is working example:
link
hope that my answer will help you out :) if you have any questions please ask

JS expand onClick multiple events

Please check this page first : Solarking - About Us
Check first 2 boxes which has a READ MORE button. On clicking them, they expand a paragraph.
Now I want it to be like when I click on it, it should expand the text and change the button value to "CLOSE" from "READ MORE". And on again clicking on "CLOSE", it should change value to "READ MORE".
I searched for long time to see how to fire multiple events on onClick, but I saw that some said to use a ; in them, some said make a new function and put 2 functions in it.
Now I tried to make a new function with 2 functions inside it (one to expand the paragraph, other to change value of button, but I failed. (I am new to JS).
Help please. Thank you in advance!
Code I have on the page :
button code:
<p style="text-align: right;"><input id="button12" style="background-color: #eca200; color: #ffffff;" onclick="return toggleMe('para1')" type="button" value="Read more" /></p>
Script :
<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>
I think the easiest way to do this would be to set a boolean variable. In other words, let's say that it starts off with the dclaration at the beginning of the page.
var hasbeenclicked = false;
Then, after the first click
hasbeenclicked = true;
After a second click
hasbeenclicked = false;
When the function is called, it checks the variable and operates accordingly. The following is not real JS....
if hasbeenclicked = true {
do some stuff;
}
else {
do some other stuff;
}
That is a simple way to accomplish what you are trying to do.
Additional info:
Use two DIV tags with separate ID's. One for the paragraph and one for the "label". Use getelementbyID to alter each one appropriately.
I noticed you are using jQuery.
You could use a toggle method.
Alter the html link. Add a class of expander and use the data attribute to identify the paragraph id
<p style="text-align: right;">
<input id="button12" data-toggle="para1" class="expander" style="background-color: #eca200; color: #ffffff;" type="button" value="Read more" />
</p>
The JS
$(".expander").click(function() {
var self = $(this);
$("#" + self.data('toggle')).slideToggle(500, function () {
if ($("#" + self.data('toggle')).is(':visible')) { // paragraph is open
self.val("Close");
} else { // paragraph is closed
self.val("Read More");
}
});
});

How to perform an automated onclick() at a certain element if the ID is always changing?

In Javascript, I'm trying to create a user script that will automatically click on a 'Blue Button'. Normally, I would do this:
var bluebutton = "document.getElementById("blue_button")"
if (bluebutton) {
bluebutton.onclick();
}
But NOW, the blue button does not have its own obvious ID. It's ID is randomized, and could be either button1, button2, or button3.
Here's the HTML that I'm talking about:
<div class="button_slot">
<div id="button1" style="cursor:pointer; padding-left:30px" onclick="buttonsubmit('button1')" onmouseover="infopane.display('Blue Button','I'm a blue button!')" onmouseout="infopane.clear()">
<div class="button_slot">
<div id="button2" style="cursor:pointer; padding-left:30px" onclick="buttonsubmit('button2')" onmouseover="infopane.display('Red Button','I'm a red button!')" onmouseout="infopane.clear()">
<div class="button_slot">
<div id="button3" style="cursor:pointer; padding-left:30px" onclick="buttonsubmit('button3')" onmouseover="infopane.display('Yellow Button','I'm a yellow button!')" onmouseout="infopane.clear()">
After a bit of reading, I've concluded that the only way to direct my onclick() to the correct element/string is by using ".toString().match(name)" as shown below:
function clickbutton(name) {
var button_list = document.querySelectorAll('.button_slot > div');
for (var i=0; i<button_list.length; i++) {
var button = button_list[i];
if (button.onmouseover && button.onmouseover.toString().match(name)) {
button.onmouseover();
button.onclick();
break;
}
}
}
clickbutton('Blue');
(note: sometimes I use clickbutton('Red'); or clickbutton('Yellow'); just to experiemen)
Now here's the problem. This method works so horribly... Sometimes, my script completely misses the button (as in, nothing gets clicked) EVEN THOUGH there is definitely a string with the word 'Blue' in it.
If someone could identify what I'm doing wrong, or perhaps even suggest a more effective method, I would appreciate it so much! Thank you!
First, I'm not sure why you can't give each button an ID which corresponds to it's color, because I believe that would be the easiest way to achieve this. But assuming that, for some reason, your button ID's must be randomized (or for that matter, maybe they don't even have an ID).
In this case, what I would do is give each button a data-button-type attribute, for instance:
<div data-button-type="Blue" id="..." style="..." onclick="..." onmouseover="..." onmouseout="...">
Now, I can check the attribute when looking for which button to click, for example:
function clickbutton(name) {
var button_list = document.querySelectorAll('.button_slot > div');
for (var i=0; i<button_list.length; i++) {
var button = button_list[i];
if (button.getAttribute('data-button-type') == name) {
button.onmouseover();
button.onclick();
break;
}
}
}
clickbutton('Blue');
I'm pretty sure you want to use indexOf although I think its most likely a timing issue.
First just try invoking it in a setTimeout function, so the document has (probably) loaded fully when you execute. It would explain it sometimes working sometimes not.
setTimeout(function(){ clickbutton(name) }, 3000);
I would do:
var clickButton = function(name){
var button_list = document.querySelectorAll('.button_slot > div');
for(var i = 0; i < button_list.length; i++){
var button = button_list[i];
if(button.getAttribute('onmouseover').indexOf(name) !== -1){
button.onclick.apply(); // They seem to have parameters in your example?
}
break;
}
}
setTimeout(function(){ clickButton('blah') }, 3000);
As a first attempt...

Eliminating warning in HTML

I am creating 3 jsp pages. There are 4 boxes with different id in each pages (i.e. box1, box2, box3, box 4 in page 1; box 5, box6, box7, box8 in page 2; box9, box10, box11, box12 in page 3). Below is the sample code in page 1:
<div class="dragableBox" id="box1">CAT</div>
<div class="dragableBox" id="box2">DOG</div>
<div class="dragableBox" id="box3">HORSE</div>
<div class="dragableBox" id="box4">TIGER</div>
In each page there is also a script. In the script I deliberately use all those ids above as parameters of a function. Below is the sample code in page 1:
dragDropObj.addSource('box1',true);
dragDropObj.addSource('box2',true);
dragDropObj.addSource('box3',true);
dragDropObj.addSource('box4',true);
dragDropObj.addSource('box5',true);
dragDropObj.addSource('box6',true);
dragDropObj.addSource('box7',true);
dragDropObj.addSource('box8',true);
dragDropObj.addSource('box9',true);
dragDropObj.addSource('box10',true);
dragDropObj.addSource('box11',true);
dragDropObj.addSource('box12',true);
I must do this because as far as I know this is the only way for my program to work. The problem I encounter is that each time the program started, a warning appears:
"The source element with id box5 does not exist"
Although the program still works fine with this warning, I still want to eliminate the warning.
My question here is:
How can I stop such warning from appearing?
Is there a kind of error catching method in HTML?
Check the existence of element before adding them.
if (typeof document.getElementById('box5') !== 'undefined'){
// continue
}
Try this: this will grab all 'dragableBox' on page and run 'dragDropObj.addSource(...,true);' on them if they have an id=box[x] without using JQuery:
boxes = document.getElementsByClassName('dragableBox');
for (i=0; i < boxes.length; ++i) {
var id = boxes[i].id;
if(id.substring(0,3)==='box')
dragDropObj.addSource(id,true);
}
if (document.getElementById('box1')){
dragDropObj.addSource('box1',true);
dragDropObj.addSource('box2',true);
dragDropObj.addSource('box3',true);
dragDropObj.addSource('box4',true);
}
if (document.getElementById('box5')){
dragDropObj.addSource('box5',true);
dragDropObj.addSource('box6',true);
dragDropObj.addSource('box7',true);
dragDropObj.addSource('box8',true);
}
if (document.getElementById('box9')){
dragDropObj.addSource('box9',true);
dragDropObj.addSource('box10',true);
dragDropObj.addSource('box11',true);
dragDropObj.addSource('box12',true);
}
EDIT:
A better solution:
groupFirstMember = 1;
if (document.getElementById('box5')){
groupFirstMember = 5;
}
else if (document.getElementById('box9')){
groupFirstMember = 9;
}
for(i=0;i<4;i++){
dragDropObj.addSource("box"+str(groupFirstMember+i),true);
}

Javascript variable scroll issue

I have a page whereby the user can press left + right buttons to scroll through numbers between 1-10.
The default value is 0 which displays blank.
There are two buttons at the bottom which allow the user to 'Clear' the number - reseting it to 0. Or to 'Shuffle', picking a random number.
After this the user can submit these numbers into a database.
My issue is, if the user were to scroll to 5 (for example), click shuffle then submit, it would submit '5' instead of the random number it should have generated.
Also if the user only clicks 'shuffle' then submit, it'll input '0'.
The issue with the 'clear' button is similar, if the user scrolls to 5, then hits reset, the variable would stay at '5' when submitted.
I'm probably overcomplicating something very simple, and im sorry if i am, but this is annoying me.
Thankyou ~
I'm not entirely certain what the problem is without looking at your code. I get the feeling it is something like this:
Javascript
var opNumb = 0; //default number
left = function(){if (opNumb>0) opNumb--;
updateNumb(opNumb);}
right = function(){if (opNumb<10) opNumb++;
updateNumb(opNumb);}
def = function(){opNumb=0;
updateNumb(opNumb);} //function to return to default
randomNumb = function(){opNumb = Math.floor(Math.random() * 11);
updateNumb(opNumb);}
updateNumb = function(Numb){document.forms[0].opVal.value = Numb;}
window.onkeydown = press; //bind keydown to press function
function press(e){
if (e.keyCode == 37) left();
if (e.keyCode == 39) right()
}
HTML form
<form id="frm1">
<input type="text" name="opVal" value="0"/><br />
<input type="button" value="left" onclick="left()"/><input type="button" value="right" onclick="right()"/><input type="button" value="Clear" onclick="def()"/><input type="button" value="Shuffle" onclick="randomNumb()"/><br />
<input type="button" value="Submit form" onclick="alert(opNumb);"/>
</form>​
What does your form look like? You're most likely having a problem setting a value?
Link to example
It sounds like your number isn't saving so whenever you update the number on the screen I would save the number then that way you should always be sending the number that you see.
var number = 0;
//All your events to call the different functions
function moveLeft{
//logic
reset(num);
}
function moveRight{
//logic
reset(num);
}
function shuffle{
//logic
reset(num);
}
function reset{
//logic
reset(num);
}
reset(num){
number = num;
//update the HTML
}

Categories