JavaScript

e.target.value, switch-case operators

13-Dec-18 16:56

Hello guys,

My final project is almost complete. It is a sub website and the goal is to add items to the cart and calculate if the items has been added or not etc.

Here is what I have so far:

window.addEventListener("load", setupCart);

function setupCart() {
	var addButtons = document.getElementsByClassName("addButton");
	
	for (var i = 0; i < addButtons.length; i++) {
		addButtons[i].addEventListener(addItem);
	}
}

function addItem(e) {
	var foodItem = e.target.nextElementSibling;
	var foodID = foodItem.getAttribute("id").value;
	var foodDescription = foodItem.cloneNode(true);
	var cartBox = document.getElementById("cart");
	
	var duplicateOrder = false;
	
	for (var i = 0; i < cartBox.childNodes.length; i++) {
		if (cartBox.childNodes[i].id === foodID) {
			cartBox.firstElementChild.value + 1;
		}
	}
	
	if (duplicateOrder === false) {
		var orderCount = document.createElement("span");
		orderCount.textContent = 1;
		foodDescription.appendChild(orderCount);
		cartBox.appendChild(foodDescription);
	}
}

I am getting an error on the browsers debug window saying:

Quote:
SCRIPT65535: SCRIPT65535: Argument not optional

For the following code:

addButtons[i].addEventListener(addItem);

Thanks !

***EDIT***

Found a bug:

addButtons[i].addEventListener(addItem);

Updated to:

addButtons[i].addEventListener("click", addItem);

Now items are loading onto cart, but repeat items are NOT simply being added by number, rather a duplicate fills the cart if the original is already there.

Working on this now. Debugger shows no error however.

modified 13-Dec-18 22:27pm.

ghazabaz6-Dec-18 20:22

6-Dec-18 20:22

Hey guys,

I am finishing up a project. I am getting some errors that I need help with. I posted the questions as comments within the code. Thanks !

// Declares the buttonClick(e) function
function buttonClick(e) {
	
	
	// Declares variables calcValue, calcDecimal and buttonValues
	var calcValue = document.getElementById("calcWindow").value;
	var calcDecimal = document.getElementById("decimals").value;
	var buttonValue = e.target.value; // This is giving me an error saying it is undefined
	
	// Begins a switch-case structure to assign events to each button pressed
	switch(buttonValue) {
		case "del":
		calcValue = "";
		break;
		case "bksp":
		calcValue = eraseChar(calcValue);
		break;
		case "enter":
		calcValue = " = " + evalEq(calcValue, calcDecimal) + "\n";
		break;
		case "prev":
		calcValue =  + lastEq(calcValue) ; // I was told I need "operators" here?
		calcValue = calcValue + buttonValue;
		break;
	}

document.getElementById("calcWindow").value = calcValue;
document.getElementById("calcWindow").focus();

}

EDIT

The directions for the buttonValue are:

Quote:
Each calculator button has a value attribute that defines what should be done with that button. Declare the buttonvalue attribute equal to the value attribute of the event object target.

Richard MacCutchan7-Dec-18 0:26

Richard MacCutchan

7-Dec-18 0:26

JavaScript

var buttonValue = e.target.value; // This is giving me an error saying it is undefined

What is e and what are its attributes?

JavaScript

calcValue =  + lastEq(calcValue) ; // I was told I need "operators" here?

What is that + sign supposed to do?

ghazabaz7-Dec-18 4:47

7-Dec-18 4:47

Richard, good question. I am following the example shown in the text. E is the buttonValue(e) function's parameter ?

I am guessing the operator required is a + operator to add the value? I also thought I did not need an operator there.

Here is the whole JS file code:

// Loads the init function when the broser window is opened
window.onload = init();

// Declares the init() function
function init() {
	
	// Declares the calcButtons variable and sets it equal to the element calcButton
	var calcButtons = document.getElementsByClassName("calcButton");
	
	// Loops through calcButtons and runs the buttonClick() function when a button is clicked
	for (var i = 0; i < calcButtons.length; i++) {
		calcButtons[i].onclick = buttonClick();
	}
	
	// Runs the calcKeys function when a key is pressed within the calcWindow element
	document.getElementById("calcWindow").addEventListener(onkeydown, calcKeys());
}

// Declares the buttonClick() function
function buttonClick(e) {
	
	
	// Declares variables calcValue, calcDecimal and buttonValues
	var calcValue = document.getElementById("calcWindow").value;
	var calcDecimal = document.getElementById("decimals").value;
	var buttonValue = e.target.value;
	
	// Begins a switch-case structure to assign events to each button pressed
	switch(buttonValue) {
		case "del":
		calcValue = "";
		break;
		case "bksp":
		calcValue = eraseChar(calcValue);
		break;
		case "enter":
		calcValue = " = " + evalEq(calcValue, calcDecimal) + "\n";
		break;
		case "prev":
		calcValue = lastEq(calcValue);
		calcValue = calcValue + buttonValue;
		break;
	}
}


document.getElementById("calcWindow").value = calcValue;
document.getElementById("calcWindow").focus();


// Declares the calcKeys() function
function calcKeys(e) {
	
	var calcValue = document.getElementById("calcWindow").value;
	var calcDecimal = document.getElementById("decimals").value;
	
	
	// Begins a switch-case structure, assigning values to each of the buttons below (delete, enter, arrow up) when pressed
	switch(e) {
		case "Delete": 
		calcValue = "";
		break;
		case: "Enter":
		calcValue = " = " + evalEq(calcValue, calcDecimal);
		break;
		case "ArrorUp":
		calcValue = lastEq(calcWindow.value);
		break;
		
		e.preventDefault();
	}
	

	document.getElementById("calcWindow").value = calcValue;
	
}







/* ===================================================================== */

function eraseChar(textStr) { 
   return textStr.substr(0, textStr.length - 1);
}

function evalEq(textStr, decimals) {
   var lines = textStr.split(/\r?\n/);
   var lastLine = lines[lines.length-1];
   var eqValue = eval(lastLine);
   return eqValue.toFixed(decimals);
}  

function lastEq(textStr) {
   var lines = textStr.split(/\r?\n/);
   var lastExp = lines[lines.length-2];
   return lastExp.substr(0, lastExp.indexOf("=")).trim();
}

modified 7-Dec-18 9:53am.

Richard MacCutchan7-Dec-18 5:29

Richard MacCutchan

7-Dec-18 5:29

The problem with homework questions is that we have no idea what your teacher has set as the problem, or what they expect in return.

ghazabaz wrote:
I am following the example shown in the text. E is the buttonValue(e) function's parameter ?

Well you need to go back to whatever text you are referring to and check that you are following it correctly. And perhaps talk to your teacher also.

Richard Deeming7-Dec-18 6:37

7-Dec-18 6:37

ghazabaz wrote:

window.onload = init();
...
calcButtons[i].onclick = buttonClick();
...
document.getElementById("calcWindow").addEventListener(onkeydown, calcKeys());

Those are likely candidates for your error. You're setting the event handler to the value returned from calling the function with no parameters, rather than the function itself.

When you call buttonClick with no parameters, e will be undefined, and you will get your error.

Remove the parentheses from the event handlers. You should probably use addEventListener consistently as well.

window.addEventListener("load", init);
...
calcButtons[i].addEventListener("click", buttonClick);
...
document.getElementById("calcWindow").addEventListener("keydown", calcKeys);

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

ghazabaz7-Dec-18 7:44

7-Dec-18 7:44

Both Richards, thanks a bunch.

After making changes to the function parentheses, the enter, delete and backspace of the calculator are now fully functional. However, none of the digits are keying in when clicked on the webpage?
Works fine if entered through the keyboard however. I am guessing it has something to do with:

	// Loops through calcButtons and runs the buttonClick() function when a button is clicked
	for (var i = 0; i < calcButtons.length; i++) {
		calcButtons[i].addEventListener("click", buttonClick);
	}
	
	// Runs the calcKeys function when a key is pressed within the calcWindow element
	document.getElementById("calcWindow").addEventListener("keydown", calcKeys);
}

// Declares the buttonClick(e) function
function buttonClick(e) {
	
	
	// Declares variables calcValue, calcDecimal and buttonValues
	var calcValue = document.getElementById("calcWindow").value;
	var calcDecimal = document.getElementById("decimals").value;
	var buttonValue = e.target.value;
	
	// Begins a switch-case structure to assign events to each button pressed
	switch(buttonValue) {
		case "del":
		calcValue = "";
		break;
		case "bksp":
		calcValue = eraseChar(calcValue);
		break;
		case "enter":
		calcValue = " = " + evalEq(calcValue, calcDecimal) + "\n";
		break;
		case "prev":
		calcValue =  + lastEq(calcValue) ; 
		calcValue = calcValue + buttonValue;
		break;
	}

document.getElementById("calcWindow").value = calcValue;
document.getElementById("calcWindow").focus();

}

Actually getting an error on:

calcValue = + lastEq(calcValue); which handles the previous button. But my main focus now are the number digits of the calculator.

Richard Deeming7-Dec-18 7:51

7-Dec-18 7:51

ghazabaz wrote:
calcValue = + lastEq(calcValue) ;

You're missing an operand there. It should look like one of these:

// Append the function result to something, and replace the value:
calcValue = SOMETHING + lastEq(calcValue); 

// Append the function result to the current value:
calcValue += lastEq(calcValue); 

// Replace the value with the function result:
calcValue = lastEq(calcValue);

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Richard Deeming7-Dec-18 7:54

7-Dec-18 7:54

Assuming your number buttons are in the calcButtons array, you'll need a default case in your switch statement to handle them:

switch (buttonValue) {
    ...
    case "prev":
        calcValue = ??? + lastEq(calcValue) ; 
        calcValue = calcValue + buttonValue;
        break;
    
    default:
        calcValue = calcValue + buttonValue;
        break;
}

JavaScript Switch Statement[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

ghazabaz8-Dec-18 6:19

8-Dec-18 6:19

Richard, thank you very much.

After implementing the suggested corrections (added "append" operator to line 95 in mt_calc.js file) the buttons are functional except the "previous" calculator buttons. Also, enter, delete and up arrow (supposed to copy & yield previous equation) are not working when used on keyboard.
Also getting a "NaN" along with the answer?

These are the instructions for the enter, delete and up up arrow buttons:

Quote:
. Click within the calculator window and, using the keyboard, directly type a mathematical expression. Verify that pressing the Enter key evaluates the current expression and moves the cursor to a new line. Show that you can copy the previous expression by pressing the Enter key followed by the up-arrow key on your keyboard. Finally verify that pressing the Delete key clears the contents of the calculator window. Note: Keyboard commands might not work in the Safari browser since Safari does not support the key property at the time of this writing.

I added the append operator to calcValue = calcValue + buttonValue; as the instructions require:

Quote:
Otherwise, append the calculator button character to the calculator window by letting, calcValue equal calcValue plus buttonValu

But when a calculator digit is entered and entered again it multiplies itself infinitely.

I was hinted at these sections as the answer:

switch(buttonValue) {
		case "del":
		calcValue = "";
		break;
		case "bksp":
		calcValue = eraseChar(calcValue);
		break;
		case "enter":
		calcValue = + " = " + evalEq(calcValue, calcDecimal); // Here
		break;
		case "prev":
		calcValue = lastEq(calcValue);  // This one
		default:
		calcValue = calcValue + buttonValue;
		break;
	}

// Begins a switch-case structure, assigning values to each of the buttons below (delete, enter, arrow up) when pressed
	switch(e) {
		case "Delete": 
		calcValue = "";
		break;
		case "Enter":
		calcValue = + " = " + evalEq(calcValue, calcDecimal);  // This one
		break;
		case "ArrowUp":
		calcValue +=  lastEq(calcWindow.value); // This one but it is exacly as the instructions ask for:

// "iii.	For "ArrowUp", add the following expression to calcValue
// lastEq(calcWindow.value)"


		break;
		case "ArrowUp":
		e.preventDefault();
		break;
	}

Here is the entire code for reference:

"use strict";

/*	
   Functions List:

   init()
      Initializes the contents of the web page and sets up the
      event handlers
      
   buttonClick(e)
      Adds functions to the buttons clicked within the calcutlor
      
   calcKeys(e)
      Adds functions to key pressed within the calculator window 
      
   eraseChar(textStr)
      Erases the last character from the text string, textStr
      
   evalEq(textStr, decimals) 
      Evaluates the equation in textStr, returning a value to the number of decimals specified by the decimals parameter

   lastEq(textStr) 
      Returns the previous expression from the list of expressions in the textStr parameter

*/

// Loads the init function when the broser window is opened
window.addEventListener("load", init);

// Declares the init() function
function init() {
	
	// Declares the calcButtons variable and sets it equal to the element calcButton
	var calcButtons = document.getElementsByClassName("calcButton");
	
	// Loops through calcButtons and runs the buttonClick() function when a button is clicked
	for (var i = 0; i < calcButtons.length; i++) {
		calcButtons[i].addEventListener("click", buttonClick);
	}
	
	// Runs the calcKeys function when a key is pressed within the calcWindow element
	document.getElementById("calcWindow").addEventListener("keydown", calcKeys);
}

// Declares the buttonClick(e) function
function buttonClick(e) {
	
	
	// Declares variables calcValue, calcDecimal and buttonValues
	var calcValue = document.getElementById("calcWindow").value;
	var calcDecimal = document.getElementById("decimals").value;
	var buttonValue = e.target.value;
	
	// Begins a switch-case structure to assign events to each button pressed
	switch(buttonValue) {
		case "del":
		calcValue = "";
		break;
		case "bksp":
		calcValue = eraseChar(calcValue);
		break;
		case "enter":
		calcValue = + " = " + evalEq(calcValue, calcDecimal) + "\n";
		break;
		case "prev":
		calcValue = lastEq(calcValue);
		default:
		calcValue = calcValue + buttonValue;
		break;
	}

document.getElementById("calcWindow").value = calcValue;
document.getElementById("calcWindow").focus();

}


// Declares the calcKeys(e) function
function calcKeys(e) {
	
	var calcValue = document.getElementById("calcWindow").value;
	var calcDecimal = document.getElementById("decimals").value;
	
	
	// Begins a switch-case structure, assigning values to each of the buttons below (delete, enter, arrow up) when pressed
	switch(e) {
		case "Delete": 
		calcValue = "";
		break;
		case "Enter":
		calcValue = + " = " + evalEq(calcValue, calcDecimal);
		break;
		case "ArrowUp":
		calcValue +=  lastEq(calcWindow.value) ;
		break;
		case "ArrowUp":
		e.preventDefault();
		break;
	}
	

	document.getElementById("calcWindow").value = calcValue;
	
}


/* ===================================================================== */

function eraseChar(textStr) { 
   return textStr.substr(0, textStr.length - 1);
}

function evalEq(textStr, decimals) {
   var lines = textStr.split(/\r?\n/);
   var lastLine = lines[lines.length-1];
   var eqValue = eval(lastLine);
   return eqValue.toFixed(decimals);
}  

function lastEq(textStr) {
   var lines = textStr.split(/\r?\n/);
   var lastExp = lines[lines.length-2];
   return lastExp.substr(0, lastExp.indexOf("=")).trim();
}

Richard Deeming11-Dec-18 2:16

11-Dec-18 2:16

ghazabaz wrote:

calcValue = + " = " + evalEq(calcValue, calcDecimal) + "\n";

You're still missing an operand there.
calcValue = ??? What goes here ??? + " = " + ...

ghazabaz wrote:

case "prev":
    calcValue = lastEq(calcValue);
default:

You're missing a break; statement in that switch case, so control "falls through" to the default case.
JavaScript Switch Statement[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

ghazabaz13-Dec-18 7:05

13-Dec-18 7:05

Thanks Richard. You are right, I was missing the operands and a break statement. I managed to fix it by Sunday evening. Really appreciate the help ! Thumbs Up | :thumbsup:

Easy HTML Editor

Bram van Kampen3-Dec-18 16:23

Bram van Kampen

3-Dec-18 16:23

Hi,
I am looking for free HTML Page Design Software to create a Simple Web Page, in which I can edit the HTML Code manually to customise.
Any Ideas?

Bram.

Bram van Kampen

Nathan Minier6-Dec-18 2:24

Nathan Minier

6-Dec-18 2:24

Notepad

Better yet:
Notepad++

"Never attribute to malice that which can be explained by stupidity."
- Hanlon's Razor

Nitin S7-Dec-18 2:57

Nitin S

7-Dec-18 2:57

use
Visual studio code
or
Visual studio community edition

=====================================================
The grass is always greener on the other side of the fence

RedDk28-Dec-18 12:44

RedDk

28-Dec-18 12:44

Firefox has visual access to page content. Very robust editing of HTML via Web Developer/Inspector.

I've been using Firefox as a go-to internet browser for several years now and only recently have begun using it to do things that only Visual Studio has been able to do before it's discovery.

Problems to obtain value "0" or "1" from a div

Bram van Kampen28-Dec-18 13:55

Bram van Kampen

28-Dec-18 13:55

Hi,
That seems a reasonable suggestion.
I'll try and Download Firefox, and see how it goes.

Thanks. Smile | :)

Bram van Kampen

serenimus1-Dec-18 1:37

serenimus

1-Dec-18 1:37

Hi!!

so, I have this Ajax function vinculated to a change Jquery event:

JavaScript

  $("#nif").change(function(){

         <pre> $.ajax({
async:true,
type:"POST",
data:N,
url:"<?=$this->basePath("alta/nuevouser/vernifduplicadoajax")?>",
    success:function(datos){
    $("#res").html(datos);

    }
    });

});

The matter is...that the result is or "1" (double register at DB) or "0" (no repeat), the value always appear in the div, depending of this result, I want to activate another

and show a message an other operations..

to evaluate this value I do the next

if($("#res").length !==0){
			var warn=parseInt(document.getElementById("res").innerHTML);
			alert(warn);
			}

but I always receive (using alert();)..isNan ...that is, "is not a Number"..
I`d need to evaluate:

if(warn==1){
//do this
}else{
//do that
}

Thanks a lot in advance!! Smile | :)

Re: Problems to obtain value "0" or "1" from a div

ZurdoDev4-Dec-18 3:27

ZurdoDev

4-Dec-18 3:27

All that means is that document.getElementById("res").innerHTML does not contain a number. All you have to do is put a breakpoint there, run the code, and see what the value is and you'll figure out what is going on.

Everyone is born right handed. Only the strongest overcome it.

Fight for left-handed rights and hand equality.

Unable to switch events in jquery

vmann30-Nov-18 19:45

vmann

30-Nov-18 19:45

I have some sort of similar markup as shown in last.

I want to filter the inner text elements based upon ids innerfilter1, innerfilter2.

I have also written code for hide general content based upon the outer filter. i.e. myid1 and myid2 which works fine. Here ids will hide divs have same classes

JavaScript

$('ul.nav.nav-tabs>li>a').click(function(){
    var curtab = $(this).attr('href').substring(1);
      console.log(curtab);
    $('.tab-content .tab-pane').each(function(){
      var tabid = this.className;
      if(tabid.indexOf(curtab) > -1){
        $(this).siblings().hide();
      }
    });
    $(this).show();
  });

});

But nested filters use to filter the content which is not general but having filter either innerfilter1, innerfilter2. I have tried below code but this effects other tabs as well also impact

JavaScript

$('div.inner-tab-box>ul.nav.nav-tabs>li>a').click(function(){
    var curtab = $(this).attr('href').substring(1);
    $('.tab-content .tab-pane').each(function(){
      var tabid = this.id;
      if(tabid.indexOf(curtab) > -1){
        $(this).siblings().each( function () {
            var tx=this.id;
            if(tx==='general') {
            } else {
               $(this).hide();
            }
        });
        $(this).show();
      }
    }); 
});

Full Markup

JavaScript

<div class="top-header">
   <div class="container-fluid">
      <div class="header-top">
         <!-- Tabs -->
         <div id="tabs">

            <!-- tabs start  -->
            <div class="tab-content">
               <!-- part 1 Will execute 2 times as  per filters-->
               <div role="tabpanel" class="tab-pane active" id="myid1">
                  <div class="row">
                     <div class="col-xs-5ths ">
                        <div class="dark-box-outer">
                           <div class="top-light-text-box">
                              <div class="inner-tab-box ">
                                 <ul class="nav nav-tabs" role="tablist">
                                    <li role="presentation" class=""><a href="#innerfilter1" aria-controls="home" role="tab" data-toggle="tab">></a></li>
                                    <li role="presentation" class=""><a href="#innerfilter2" aria-controls="profile" role="tab" data-toggle="tab"></a></li>
                                 </ul>
                                 [B]<div class="tab-content">
                                    <div role="tabpanel" class="tab-pane myid1 " id="innerfilter1">
                                       <ul>
                                          <li>
                                            /* Some Content */
                                          </li>
                                       </ul>
                                    </div>
                                    <div role="tabpanel" class="tab-pane myid1 " id="innerfilter2">
                                       <ul>
                                          <li>
                                          /* Some Content */
                                          </li>
                                       </ul>
                                    </div>
                                    <div role="tabpanel" class="tab-pane myid1 " id="general">
                                       <ul>
                                          <li>
                                          /* Some Content */
                                          </li>
                                       </ul>
                                    </div>
                                    <div role="tabpanel" class="tab-pane myId2 " id="general">
                                       <ul>
                                          <li>
                                          /* Some Content */
                                          </li>
                                       </ul>
                                    </div>[/B]
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="col-xs-5ths ">   
                        <!-- Repeated Markup   -->             
                     </div>
                     <div class="col-xs-5ths ">  
                        <!-- Repeated Markup   -->                                 
                     </div>
                     <div class="col-xs-5ths ">
                            <!-- Repeated Markup   -->                                
                     </div>
                     <div class="col-xs-5ths ">

                     </div>
                  </div>
               </div>
               <!-- end part 1 -->
               <div role="tabpanel" class="tab-pane " id="myId2">
                <!--Repeated Content For myId2-->
               </div>
               <!-- end part 1 -->
            </div>
            <!-- End part 2 -->
         </div>
      </div>
      <!-- ./Tabs -->
   </div>
</div>

Can anyone help me to fix this.

Thanks

Re: Unable to switch events in jquery

ZurdoDev4-Dec-18 3:28

ZurdoDev

4-Dec-18 3:28

I do not understand what your question is. Maybe you can provide a simple summary and ask a clear question.

Everyone is born right handed. Only the strongest overcome it.

Fight for left-handed rights and hand equality.

Error on line 45

ghazabaz30-Nov-18 14:38