色をラジオボタンで選択

質問

エレメントでボタンを押すと色を変えるJavaScriptです。

検索をしながら　ボタンで一度変えることはできるようになりましたが

<script type="text/javascript">
function effect() {
var element = document.getElementById("sample");
element.style.color = '#000000';
}
</script>
<button onclick="effect()">チェンジ</button>

<span id="sample">■□□■</span>

ラジオボタンで選択するようにしたいのですが
どのようにすればよいでしょうか？
うまくいく方法を教えてください。

ブラウザーはGoogle Chrome最新版です。
どうしてもできなければ　Firefoxでもかまいません。

<script type="text/javascript">
function effect() {
var element = document.getElementById("sample");
element.style.color = '#000000';
}
</script>

<input type=radio name="colorcode" value="#000000" checked>黒
<input type=radio name="colorcode" value="#ff0000">赤
<input type=radio name="colorcode" value="#00ff00">緑

<span id="sample">■□□■</span>

回答No.2

drg75 · ベストアンサー

<script type="text/javascript">
function effect(color) {
var element = document.getElementById("sample");
element.style.color = color;
}
</script>

お礼

解答を参考にして　操作できるソースができました。

まだ、JavaScriptの基本がわかっていないので　勉強して　研究してみます。

回答No.1

drg75

以下でどうでしょうか。
effectに引数でvalueを渡せるような
修正が必要となります。

<input type=radio name="colorcode" value="#000000" checked onclick="effect(this)">黒
<input type=radio name="colorcode" value="#ff0000" onclick="effect(this)">赤
<input type=radio name="colorcode" value="#00ff00" onclick="effect(this)">緑

参考URL：

http://eelife.cool.ne.jp/java/botan/rajio_smp.html

お礼

解答ありがとうございます。

>effectに引数でvalueを渡せるような
>修正が必要となります。

どうやってやればよいのでしょうか？
勉強中で　わかりません。
申し訳ないです。

サンプルだと　id指定できないです

<script language="JavaScript">
<!--eelife
function clr(Color){
clrs = Color;
document.fgColor = clrs;
}
// -->
</script>

<form>
<input type="radio" checked name="ra" onclick="clr('#000000')">：黒&nbsp;
<input type="radio" name="ra" onclick="clr('#ff0000')">：赤&nbsp;
<input type="radio" name="ra" onclick="clr('#0000ff')">：青&nbsp;
<input type="radio" name="ra" onclick="clr('#00ff00')">：緑
</form>

<span id="sample">■□□■</span>
<span>■□□■</span>

このようにidで指定したものを変更したいのです。

<script type="text/javascript">
function effect() {
var element = document.getElementById("sample");
element.style.color = '#ff0000';
}
</script>
<button onclick="effect()">チェンジ</button>

<span id="sample">■□□■</span>
<span>■□□■</span>

なお　サンプルは　下記サイトより引用しました。
http://javascriptist.net/ref/element.style.color.html

紹介いただいたサイト（http://eelife.cool.ne.jp/java/botan/rajio_smp.html）の類似サイトは
http://allabout.co.jp/gm/gc/23787/
が　ありましたが　このままではidで指定できないようです。