How to pass values as parameters in javascript

Question

I am working on a test project to learn web development and have run into a problem that I am not sure how to solve.

I have a table that contains 11 cells. 9 of the cells have predefined values in them, however, for the other two I would like to manually set the value through passing values to parameters.

The code;

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Colour Match</title>
</head>

<body>
<table width="300" border="1" id="menuitems">
  <tbody>
    <tr>
      <td id="cell1"><div>&nbsp;RED</div></td>
      <td id="cell2"><div>&nbsp;BLUE</div></td>
      <td  id="cell3"><div>&nbsp;GREEN</div></td>
    </tr>
    <tr>
      <td id="cell5"><div>&nbsp;PINK</div></td>
      <td  id="cell6"><div>&nbsp;PURPLE</div></td>
      <td  id="cell7"><div>&nbsp;YELLOW</div></td>
    </tr>
    <tr>
      <td id="cell9"><div>&nbsp;BLACK</div></td>
      <td  id="cell10"><div>&nbsp;BROWN</div></td>
      <td  id="cell11"><div>&nbsp;GREY</div></td>
    </tr>
  </tbody>
</table>
<table width="300" border="1" id="menulist">
  <tbody>
    <tr>
    <td id="colourname"><div>&nbsp;colour name</div></td>
    </tr>
    <tr>
      <td id="colour">&nbsp;colour</td>
    </tr>
  </tbody>
</table>
</body>
</html>

I have given ids to each cell and what I would like to do is, change the value of the bottom two cells 'colourname' and 'colour' depending on what cell user clicked, however, I would like to manually pass values to javascript parameter when I call it on click; Something like this;

 </script> <td id="cell1" onClick="mySetup("RED", Color:RED)"><div>&nbsp;RED</div></td>

I don't have much knowledge of Javascript but I have some knowledge of java and this is roughly how it can be achieve in java:

TextField someID;
Button SomeID;


    Public mySetup (String colourName, Color colour) {

    someID = colourName;
    someID.setBackgroundColor(colour)

    }

What I want to do is set up a function in javascript that when called onClick takes in values as parameter and changes the bottom two cells:

I am sure this isn't the correct way of doing it in JS but just to explain my question better:

Function mySetup (Var name, Color colour) {
colourName.setVar(name);
colour.setColour(colour); 
}

I hope I have explained myself properly, if not please let me know and I will try to explain better.

EDITED:

colourName should change the text of the cell, whereas colour should change the background colour of the cell.

EDITED 2

Hi, I think my question did not come as clear as I wanted it to be;

The parameter of the function should take in two values, 1 for colourName and 1 for the backgroundcolour.

the colourName should change the text of colourname cell and backgroundcolour should change the background for colour for colour cell.

<td id="colourname"><div>&nbsp;colour name</div></td>
</tr>
<tr>
  <td id="colour">&nbsp;colour</td>
</tr>

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Sabaz
– Sabaz, Commented Feb 2, 2016 at 10:03

Blag · Accepted Answer · 2016-02-02 10:50:57Z

2

function f(col, name) {
  $("#colourname div").html(name);
  $("#colour").css('background-color', col);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="300" border="1" id="menuitems">
  <tbody>
    <tr>
      <td id="cell1" onclick="f('RED', 'name RED')"><div>&nbsp;RED</div></td>
      <td id="cell2" onclick="f('BLUE', 'name BLUE')"><div>&nbsp;BLUE</div></td>
      <td id="cell3" onclick="f('GREEN', 'name GREEN')"><div>&nbsp;GREEN</div></td>
    </tr>
  </tbody>
</table>
<table width="300" border="1" id="menulist">
  <tbody>
    <tr>
      <td id="colourname"><div>&nbsp;colour name</div></td>
    </tr>
    <tr><td id="colour">&nbsp;colour</td></tr>
  </tbody>
</table>

see https://jsfiddle.net/gkmmmk86/4/

edited Feb 2, 2016 at 10:50

answered Feb 2, 2016 at 10:16

Blag

5,8942 gold badges26 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Henry Over a year ago

Hi, would like to pass two values to the parameters and also change the whole background of for the colour cell, would that be possible?

RIYAJ KHAN Over a year ago

You dont need to pass two values.Using one value you can do it

Blag Over a year ago

@Henry why two value ? for the background jsfiddle.net/gkmmmk86/1 this ?

Henry Over a year ago

Hi Blag, no reason tbh but I just want to pass 2 values.

Blag Over a year ago

@Henry yes, that's what the code in the post do check jsfiddle.net/gkmmmk86/4

|

RIYAJ KHAN · Accepted Answer · 2016-02-02 10:51:59Z

1

First your click event call should be like this.

<td id="cell1" onClick="mySetup('RED')"><div>&nbsp;RED</div></td>

and JS :

UPDATE :

function mySetup(Color) {

    var arr = {
        "RED": {
            "colornam": "red",
            "color": "red"
        },
        "GREEN": {
            "colornam": "blue",
            "color": "blue"
        },
        "BLUE": {
            "colornam": "green",
            "color": "green"
        }
    }
    var colourname = document.getElementById('colourname');
    var colour = document.getElementById('colour');

    var coloName = arr[Color];
    colour.style.background = coloName.color;
    colourname.innerHTML=coloName.colornam;

}

Please see Fiddle

Please see the updated fiddle

UPDATE2 :

td id="cell1" onClick="mySetup('RED','red')"><div>&nbsp;RED</div></td>

JS:

function mySetup(Color,colorName) {

    var colourname = document.getElementById('colourname');
    var colour = document.getElementById('colour');

    colour.style.background = Color;
    colourname.innerHTML=colorName;

}

edited Feb 2, 2016 at 10:51

answered Feb 2, 2016 at 10:13

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

8 Comments

Henry Over a year ago

Hi, I would like to pass two separate values 1 for name and 1 for colour. also, I am little confused about the if statment

Henry Over a year ago

Hi, it does not change the name of colourname cell, also, I want to pass 2 values 1 for text and 1 for colour instead of just 1 because in future the requirement might change e.g. i might have different colour with a different name.

Henry Over a year ago

your second edit is exactly the output I want but the paramters must take in two values 1 for name and 1 for colour and is it possible to not have the array

Henry Over a year ago

Please can you show me how this can be done, would it be possible to use as less code as possible.

Henry Over a year ago

the paramter should look something like this: "mySetup('red','RED')"

|

pratikpawar · Accepted Answer · 2016-02-02 11:02:01Z

1

Write a simple function

Javascript

function mySetup(CoulourName, Color){
    var colourname = document.getElementById('colourname');
    var colour= document.getElementById('colour');
    colourname.innerHTML = CoulourName;
    colour.style.background = Color;
  }

HTML

And use onClick = "mySetup('FANCY NAME','RED');" on td and so on for others with diferent color name.

edited Feb 2, 2016 at 11:02

answered Feb 2, 2016 at 10:54

pratikpawar

2,0982 gold badges17 silver badges20 bronze badges

2 Comments

Blag Over a year ago

you don't answer the need to be able to set a name different that the color

pratikpawar Over a year ago

@Blag Thanks for mentioning it. Updated Answer :) Though Blag and Riyaz mentioned it in similar way I thought OP might get an idea about code better with variations.

Niks · Accepted Answer · 2016-02-02 12:42:11Z

-3

You can try this :

 <td id="cell1" onClick="mySetup('RED', '#FF0000')"><div>&nbsp;RED</div></td>

var Color = new Object();

function mySetup (name, colourCode) {

    Color.name = name;
    Color.colorCode = colourCode;

}

edited Feb 2, 2016 at 12:42

answered Feb 2, 2016 at 10:26

Niks

1857 bronze badges

2 Comments

Henry Over a year ago

Hi, how would I pass values to the parameter? onClick="mySetup()", would it be mySetup(name, colour) or mySetup('name', 'colour')

Blag Over a year ago

this code will not work, correct it or remove it, else you'll end up with -1 soon

Collectives™ on Stack Overflow

How to pass values as parameters in javascript

4 Answers 4

6 Comments

8 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

8 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related