CODEWITHSUNDEEP
javascriptjqueryhtmlfunctionparameters
Henry
Henry

Reputation: 1042

How to pass values as parameters in javascript

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>

Upvotes: 3

Views: 2264

Answers (4)

Niks
Niks

Reputation: 185

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;

}

Upvotes: -3

pratikpawar
pratikpawar

Reputation: 2098

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.

Upvotes: 1

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

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;

}

Upvotes: 1

Blag
Blag

Reputation: 5894

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/

Upvotes: 2

Related Questions