Avatar of Allen Pitts
Allen PittsFlag for United States of America asked on

JavaScript function with arguments 131122

Hello Expert.

JavaScript in HTML page below passes argument from onClick event to function
Hospital _Name to display the name and aliases.


1. Would like to stack the aliases in the alert by putting a page break in the alert like
alert("The Hospital Name is " + name + ".  The aliases are " + alias1 + ",<br />  " + alias2 + "<br />, " + alias3 + "<br />, " + alias4);

But this does not cause a page break but just displays the  string <br />.
How can I begin a new line with each of the alias names?

2. Right now in the function calls by onClick where the last parameter is empty quotes  
a comma appears after the last alias. So I tried taking the comma out but that made the button disappear. How can I get rid of the comma after the last parameter with a string?

Thanks.

Allen in Dallas


<!DOCTYPE html>
<html>
<title>LHP Hopsital Group</title>

<style type="text/css">
 body {font-family: arial;}
 </style>

<body>

<p>Click one of the buttons to call see the the hospital alaises</p>

<button onclick="Hospital_Name('Portneuf Medical Center','PMC','Portneuf','Pocatello','_')">Portneuf Medical Center</button><br />
<button onclick="Hospital_Name('Texas Health Presbyterian Hospital-WNJ','Wilson-Jones' , 'THR-WNJ', 'PWNJ', 'Sherman')">Texas Health Presbyterian Hospital-WNJ</button><br />
<button onclick="Hospital_Name('Seton Medical Center Harker Heights','HH', 'SMCHH', 'Killeen', 'Seton')">Seton Medical Center Harker Heights</button><br />
<button onclick="Hospital_Name('Bay Medical Center Sacred Heart Health System','BMC', 'Panama City', 'Sacred Heart', '')">Bay Medical Center Sacred Heart Health System</button> <br />
<button onclick="Hospital_Name('HackensackUMC Mountainside','HUMC', 'MSH', 'Montclair', '')">Hackensack UMC Mountainside</button> <br />
<button onclick="Hospital_Name('Hackensack University Medical Group','HUMC-PV', 'Pasack Valley', 'Westwood', '')">Hackensack University Medical Group</button> <br />
<br />
<br />

<script>
function Hospital_Name(name,alias1,alias2,alias3,alias4)
{
alert("The Hospital Name is " + name + ".  The aliases are " + alias1 + ",  " + alias2 + ", " + alias3 + ", " + alias4);
}
</script>

This page has a function called hospitalName which is declared with five placemaker arguments,<br />
'name', 'alias1', 'alias2', 'alias3', and 'alias4'. When button calls the function there are five arguments,<br />
passed to the function depending on which hospital is called <br />
by the onClick event associated with the button.<br />
These five strings replace the placemaker <br />
arguments used to create the function with string values that are  <br />
passed to function when then button is clicked<br />

</body>
</html>

Open in new window

JavaScript

Avatar of undefined
Last Comment
VincentPuglia

8/22/2022 - Mon
jb1dev

For the first part of your question, you need to use "\n" for a newline, not the <br> tag.

E.g.
    alert("Hello \n world");
SOLUTION
jb1dev

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER CERTIFIED SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
Allen Pitts

Hello Vinny,

Am splitting the points between you and jb1dev because
in fairness he answered first and did answer the question.

But I am blown away by the thoughtfulness and depth of
your answer. I have been studying it for am about an
hour and only now think I understand it.

In the block that begins
var hospitals = [
      {hName: 'Portneuf Med....
I think an array is created within in an array. The outer array
is called 'hName' and the inner array is called 'alias'

Then in the function called Hospital_Name(ndx) four variables are
created. The first variable the Object receives the argument ndx
and passes it to the object hospitals (i think).
The second variable, 'name', refers to the outer array hName and
attaches it to theObject.
The third variable refers to the inner array and attaches the inner
array top theObject. (Is 'attaches' correct? Is there a better verb?)

The fourth variable is 'message'. I think I get the first part
wherein the variable 'name' is called as the first part of the message string
which eventually is made the parameter of an alert keyword.

The second part of the 'message' variable is the part hat really twists my
head around. I think this is a For Loop (http://www.w3schools.com/js/js_loop_for.asp)
The first line says that i begins at 0 and if i is less than the length of the inner array,
aliasArray, then increment i by one.

The next line looks like a ternary operator but not sure exactly how it works.
The part before the question mark is the expression to be tested.
I think the ternary operator asks: In 'message' does the variable i equal zero?
If so put in the message a line return. If in the variable 'message' i does not equal zero then put in the message the string in the inner array presently associated with  i.

So instead of passing the hospital names and alias using function arguments the outer
array was called by the onClick event by referring to the outer array index number. After that it gets a little fuzzy about how the the outer array is associated with the inner array.
Pretty sure this happens in the first part of the Hospital_Name function but not
really sure how. But once that happens then the inner array associated with the outer array is looped thru and made a part of the message.

Would like to investigate this more and understand it better. But I have probably
taken too much time. Perhaps I could begin a new question to get you more points
or take to a different venue and I could compensate you for your time helping me understand this via PayPal.

Thanks.

Allen
pittsallen@usa.net
VincentPuglia

Hi Allen,
   Glad you liked it.  :D  
Many people would look at 'hospitals' and see an array within an array.  However, it is an array of objects. Each object has 2 properties:  hName, a string; and alias, an array of strings.  The object's name (for all practical purposes) is the array's index.  

If you'd like to play with it and see one difference between arrays and objects, add the following immediately after the "var hospitals" code:
 
for (property in hospitals)
    alert( property + ' = ' + hospitals[property]);   

Open in new window


as for the 'solution' and your question:
// using an index into hospitals, get its data, and assign them to "theObject" 
// sort of like: var states = ["NY", "NJ", CA"];  var myState = states[0];
// only difference is a lot more garbage is being dragged over :)   

var theObject = hospitals[ndx];  

// an object's properties are accessed with 'dot' notation: theObject.hName, theObject.alias
// this is just like the DOM (document object method) for accessing html elements:
// document.forms["myForm"].name  document.forms.myForm.name

var name = theObject.hName;

//the 'name' variable is really unnecessary; the line below could be written as:
//var message = "The hospital name is " + theObject.hName + ".  The aliases are \n" ;

var aliasArray = theObject.alias;
// this is a simply assignment, once theObject has been declared and defined.  The difference between alias & hName is that the former is an array.

    var message = "The hospital name is " + name + ".  The aliases are \n" ;
	
   for ( i = 0; i < aliasArray.length; i++)
		message += ((i == 0) ? " \n" : ",  \n") + aliasArray[i];
		alert(message)

/* 
the "i' enables us to step through the aliasArray one cell at a time. We are testing at i==0 
 because the linefeeds are going to be put before, rather than after, the alias data, so no comma should be added to the 1st alias (arrays begin counting with 0).    
		message += ( (i == 0) ? " \n" : ",  \n") + aliasArray[i];
normal terniarys are:
 theResult = (if this is true) ? doThis : elseDoThis;
the one I wrote says:
 theResult =  (  (if this is true) ? doThis : elseDoThis  ) + plusThis;
the extra set of parentheses simply makes sure whatever is in them gets calculated first, so theResult ends up equaling
 doThis + plusThis  when i==0
and
elseDoThis + plusThis  for the rest of the cases
*/

Open in new window


Insofar as other questions, venues, etc...whatever is convenient and appropriate for you.  From what people tell me, I'm retired....but there are still some games of gog.com that I haven't picked up...see my profile for my email.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23