2016-02-02 2 views
3

Я работаю над тестовым проектом, чтобы изучить веб-разработку и столкнулся с проблемой, которую я не знаю, как ее решить.Как передать значения как параметры в javascript

У меня есть таблица, которая содержит 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> 

Я дал идентификаторы для каждой ячейки и то, что я хотел бы сделать это, изменить значение двух нижних клеток «colourname» и «цвет» в зависимости от того, что клетка пользователь нажал, однако, я хотел бы вручную передавать значения в параметр javascript, когда я вызываю его при нажатии; Что-то вроде этого;

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

У меня нет много знаний Javascript, но у меня есть некоторые знания о Java, и это примерно, как это может быть достичь в Java:

TextField someID; 
Button SomeID; 


    Public mySetup (String colourName, Color colour) { 

    someID = colourName; 
    someID.setBackgroundColor(colour) 

    } 

То, что я хочу сделать, это настроить функция в JavaScript, что при вызове OnClick принимает значений в качестве параметра и изменяет нижние две клетки:

Я уверен, что это не правильный способ сделать это в JS, но только, чтобы объяснить мой вопрос лучше:

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

Надеюсь, я правильно объяснил себя, если не сообщите мне, и я попытаюсь объяснить лучше.

Редакция:

colourName должен изменить текст ячейки, в то время как цвет должен изменить цвет фона ячейки.

EDITED 2

Привет, Я думаю, что мой вопрос не стало ясно, как я хотел, чтобы это было;

Параметр функции должен принимать два значения: 1 для colourName и 1 для фона.

colourName должен изменить текст ячейки colourame, а backgroundcolour должен изменить фон для цвета для ячейки цвета.

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

omit type: 'Функция mySetup (имя, цвет) {' –

+0

Привет, извините, я не совсем понимаю, что вы имеете в виду. – Henry

+0

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

ответ

1

Первый звонок для звонка должен быть таким.

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

и 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

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; 

} 
+0

Привет, я хотел бы передать два отдельных значения 1 для имени и 1 для цвета. Кроме того, я немного смущен о статусе if – Henry

+0

Привет, он не меняет имя ячейки colourname, также я хочу передать 2 значения 1 для текста и 1 для цвета вместо 1, потому что в будущем это может измениться, например. у меня может быть другой цвет с другим именем. – Henry

+0

Обновленные ответы –

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>

см https://jsfiddle.net/gkmmmk86/4/

+0

Привет, хотел бы передать два значения параметрам, а также изменить весь фон для ячейки цвета, возможно ли это? – Henry

+0

Вам не нужно передавать два значения. Используя одно значение, вы можете это сделать –

+0

@Henry почему два значения? для фона https://jsfiddle.net/gkmmmk86/1/ это? – Blag

-3

Вы можете попробовать это:

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

var Цвет = новый Объект();

функция mySetup (имя, colourCode) {

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

}

+0

Привет, как бы передать значения параметру? onClick = "mySetup()", это будет mySetup (имя, цвет) или mySetup ('name', 'color') – Henry

+0

этот код не будет работать, исправить или удалить его, иначе вы закончите с ' 1' soon – Blag

1

Написать простую функцию

Javascript

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

HTML

И используйте onClick = "mySetup('FANCY NAME','RED');" на td и т. Д. Для других с различным цветовым названием.

+1

вы не отвечаете на вопрос «нужно иметь возможность устанавливать имя, отличающееся тем, что цвет» – Blag

+1

@Blag Спасибо, что упомянул об этом. Обновленный ответ :) Хотя Blag и Riyaz упоминали об этом аналогичным образом, я думал, что OP может лучше понять идею кода с вариациями. – pratikpawar

Смежные вопросы