help with repetitive function

Question

katties 0 Newbie Poster

12 Years Ago

Hi
I have a function that reads a numeric value from a dropdown menu 'onchange'; the thing is, I have a couple of menus like that, and I would love to make my function more generic, so it would not need to be repeated every time for every dropdown menu...

function showQuantity1(){
    var nameArray = getName();
    var selOption = document.getElementById('car').selectedIndex;
    var y = document.getElementById('car').options;
    var quant = Number(y[selOption].index);
    if (quant > 0 && !isNaN(quant)){
    document.getElementById('quantity1').innerHTML = quant + nameArray[0];
    }

javascript

3 Contributors
7 Replies
109 Views
1 Day Discussion Span
Latest Post 12 Years Ago Latest Post by Taywin

JorgeM 958 Problem Solver

12 Years Ago

So then have a generic function that can accept parameters.

JorgeM 958 Problem Solver

12 Years Ago

Ok so, it would be something like...

function showQuantity(vType,vQty){
 Your JavaScript code, use vType and vQty in place of strings
}

Call your function

onchange="showQuantity('cars','3')"

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

katties 0 Newbie Poster · Answer 1 · 2012-08-26T00:17:25+00:00

katties 0 Newbie Poster

12 Years Ago

Yes, I have tried but got stuck...(:

katties 0 Newbie Poster · Answer 2 · 2012-08-26T10:58:59+00:00

It says 'showQuantity1 is not defined'...what do I do wrong?

function showQuantity1(vType, vQty){
    var nameArray = getName();
    var selOption = document.getElementById('vType').selectedIndex;
    var y = document.getElementById('vType').options;
    var quant = Number(y[selOption].index);
    if (quant > 0 && !isNaN(quant)){
    document.getElementById('vQty').innerHTML = quant + nameArray[0];
    }

In my html:

 <select name="cars" id="cars" onchange="showQuantity1()">
                                            <option selected="selected">0</option>
                                                                <option>1</option>
                                                                <option>2</option>
                                                                <option>3</option>
                                                                <option>4</option>
                                                                <option>5</option>
                                                                <option>6</option>
                                                                <option>7</option>
                                                                <option>8</option>
                                                                <option>9</option>
                                                                <option>10</option>
                        </select>

Taywin 312 Posting Virtuoso · Answer 3 · 2012-08-26T17:14:59+00:00

JorgeM has already given you the correct answer. You seems to miss certain things here.

Where do you place function showQuantity1(...)? It looks like you did not place it inside a tag <script type="text/javascript">...</script> or you did not include the correct Javascript file to the HTML file. If you have it inside the tag, the error should not be showQuantity1 is not defined but it should be from document.getElementById(vType) is null instead because you are calling the function without passing any argument.

Also, your function is very verbose but yet not succinct; however, I will keep it as it is because you still have more to learn. Here is a sample of what it would be in a HTML page with JavaScript inside the page...

<html>
<head>
<script type="text/javascript">
// your getName() function here
function getName() {
  ...  // whatever you implement goes here...
}

// The script tag could be inside the body tag as well, but
// that would be a bit messy. Better place is in the "head" tag.
function showQuantity1(vType, vQty){
  var nameArray = getName();
  var selOption = document.getElementById('vType').selectedIndex;
  var y = document.getElementById('vType').options;
  var quant = Number(y[selOption].index);
  if (quant > 0 && !isNaN(quant)){
  document.getElementById('vQty').innerHTML = quant + nameArray[0];
}
</script>

<body>
  <select name="cars" id="cars" onchange="showQuantity1('cars', 'quantity1')">
    <option selected="selected">0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>
  <div id="quantity1" name="quantity1"></div>
</body>
</html>

Another option is to place the script in a file and include it in HTML file...

// All script contents below are inside a javascript file and notice there is no
// script tag around it.
// Let's say the file name is myjs.js
// your getName() function here
function getName() {
  ...  // whatever you implement goes here...
}

// The script tag could be inside the body tag as well, but
// that would be a bit messy. Better place is in the "head" tag.
function showQuantity1(vType, vQty){
  var nameArray = getName();
  var selOption = document.getElementById('vType').selectedIndex;
  var y = document.getElementById('vType').options;
  var quant = Number(y[selOption].index);
  if (quant > 0 && !isNaN(quant)){
  document.getElementById('vQty').innerHTML = quant + nameArray[0];
}

// in HTML
<html>
<head>
<!-- the JS file must be located in the same folder as this HTML file -->
<script type="text/javascript" src="myjs.js"></script>
</head>
<body>
  <select name="cars" id="cars" onchange="showQuantity1('cars', 'quantity1')">
    <option selected="selected">0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>
  <div id="quantity1" name="quantity1"></div>
</body>
</html>

katties 0 Newbie Poster · Answer 4 · 2012-08-27T16:55:08+00:00

document.getElementById(vType) is null

Yes, Taywin, Iput the js into separate file and this exactly the message I get : document.getElementById(vType) is null. Any ideas?...

Taywin 312 Posting Virtuoso · Answer 5 · 2012-08-27T18:14:10+00:00

Then you need to pass in a correct set of variable when you call showQuantity1() in your select tag. Look at how I did in the example.