如何在JavaScript中将值作为参数传递

Question

如何在JavaScript中将值作为参数传递

3

我正在进行一个测试项目，以学习网站开发，并遇到了一个我不确定如何解决的问题。

我有一张包含11个单元格的表格。其中9个单元格已经预先定义了值，但是对于另外两个单元格，我希望通过传递参数手动设置值。

以下是代码：

<!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>

我已经为每个单元格指定了ID，我想要做的是，根据用户所点击的单元格，改变底部两个单元格“colourname”和“colour”的值。但是，当我在单击时调用javascript参数时，我想要手动传递值。就像这样；

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

我对Javascript的知识不是很丰富，但我有一些Java方面的知识，以下是大致实现方法：

TextField someID;
Button SomeID;


    Public mySetup (String colourName, Color colour) {

    someID = colourName;
    someID.setBackgroundColor(colour)

    }

我想要做的是在javascript中设置一个函数，当被点击时作为参数传入值并更改底部两个单元格：

我确信这不是用JS实现的正确方法，但只是为了更好地解释我的问题：

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

如果我没有解释清楚，请告诉我，我会尽力更好地解释。

修改：

colourName应更改单元格的文本，而colour应更改单元格的背景颜色。

第二次修改

嗨，我认为我的问题没有像我想象的那样清晰明了;

函数的参数应该接收两个值，一个是colorName，另一个是backgroundcolor。

colorName应更改颜色名称单元格的文本，而backgroundcolor应更改颜色单元格的背景颜色。

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

- Henry

函数 mySetup (名称，颜色) { - online Thomas

抱歉，我不太确定你的意思是什么。 - Henry

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions - Sabaz

4个回答

1

首先，您的点击事件调用应该像这样。

<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;

}

请查看 Fiddle。

请查看更新后的 fiddle。 更新2：

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;

}

- RIYAJ KHAN

你的第二次编辑产生了我想要的输出，但参数必须接受两个值，一个是名称，一个是颜色，是否可能不使用数组？ - Henry

请问您能否向我展示如何完成这个任务，是否有可能尽量使用少量的代码。 - Henry

参数应该长成这样："mySetup('red','RED')"。 - Henry

谢谢，我现在尝试一下，然后会告诉你结果。这看起来就是我想要的。 - Henry

@Henry 我忘了移除Jsfiddle，但是帖子中的代码片段已经解决了这个问题...无论何时X) - Blag

显示剩余3条评论

1

编写一个简单的函数。

Javascript

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

HTML

在 td 上使用 onClick = "mySetup('华丽的名字','红色');"，对于其他带有不同颜色名称的元素也是如此。

- pratikpawar

1

您需要能够设置不同于颜色的名称。 - Blag

1

@Blag 谢谢你提到这个问题。我更新了答案 :) 尽管 Blag 和 Riyaz 以类似的方式提到了它，但我认为通过变化，原始问题可能更容易理解代码。 - pratikpawar

-3

你可以尝试这个：

 <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;

}

- Niks

嗨，我该如何将值传递给参数？在 onClick="mySetup()" 中，应该是 mySetup(name, colour) 还是 mySetup('name', 'colour')？ - Henry

这段代码将无法运行，请进行修正或移除，否则您很快就会得到“-1”。 - Blag

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Blag · Accepted Answer

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>

请查看https://jsfiddle.net/gkmmmk86/4/