整数 + 2x 单选按钮设置输入 --> 输出

Question

我有一个包含三个变量部分的表单：第一部分是一个文本字段，要求用户输入一个数字让我们调用这个 user_number；接下来是一组单选按钮。其中三个，确定输出的“类型”变量。我们称之为banner_type。最后，还有另一组单选按钮，这次是 16 个。这些决定了输出的'style'变量，我们可以将它命名为banner_style。
为了让脚本运行，有一个名为 Generate 的按钮。它不是提交按钮。最后，输出区域是一个显示正确结果的 div。

现在，这个表单的目的是允许用户选择某种类型的图像，一种可以改变类型和风格的图像，并为不同的用户输出不同的信息，因此是三个变量。

如果有帮助，这应该是为了简化 Folding@Home sig 横幅的选择。编码如下：

<form>
User Number: <input type="text" id="user_number" /><br /><br />
Team & User Info: <input type="radio" name="banner_type" value="type0" /><br /><br />
Team Info Only: <input type="radio" name="banner_type" value="type1" /><br /><br />
User Info Only: <input type="radio" name="banner_type" value="type2" /><br /><br />
1: <input type="radio" name="banner_style" value="1" /><br /><br />
2: <input type="radio" name="banner_style" value="2" /><br /><br />
3: <input type="radio" name="banner_style" value="3" /><br /><br />
4: <input type="radio" name="banner_style" value="4" /><br /><br />
5: <input type="radio" name="banner_style" value="5" /><br /><br />
6: <input type="radio" name="banner_style" value="6" /><br /><br />
7: <input type="radio" name="banner_style" value="7" /><br /><br />
8: <input type="radio" name="banner_style" value="8" /><br /><br />
9: <input type="radio" name="banner_style" value="9" /><br /><br />
10: <input type="radio" name="banner_style" value="10" /><br /><br />
11: <input type="radio" name="banner_style" value="11" /><br /><br />
12: <input type="radio" name="banner_style" value="12" /><br /><br />
13: <input type="radio" name="banner_style" value="13" /><br /><br />
14: <input type="radio" name="banner_style" value="14" /><br /><br />
15: <input type="radio" name="banner_style" value="15" /><br /><br />
16: <input type="radio" name="banner_style" value="16" /><br /><br />
<input type="button" id="Generate" value="Generate" />
</form>

Image URL: <div id="URL" style=display:inline;></div>

<script type="text/javascript">
document.getElementById('Generate').addEventListener('click',function() {
*SOMETHING NEEDS TO GO HERE*
document.getElementById('URL').innerHTML = 'http://folding.extremeoverclocking.com/sigs/sigimage.php?u=' + user_number + banner_style + banner_type;
});
</script>

所以我的最终目标是获得基本图像地址，如脚本末尾所示，然后是用户编号，这应该是用户在文本字段中输入的任何内容的精确副本，然后是横幅样式，看起来像这样：

&c1=000000&c2=000000&c3=000000&c4=000000&c5=000000

这对于每个不同的banner_style 都会有所不同。每个值代表图像本身上不同元素的十六进制颜色代码。最后是横幅类型，看起来像这样：

&bg=0

这将是 0、1 或 2。

在这一点上，我应该明确一点，我几乎从不使用 javascript，所以我需要向我解释清楚的一切，所以我也可以从中学习。此外，如果可能的话，像这样的 id 是纯 JS...没有 jQuery 的东西，或类似的。

Answer 1

天哪，没有 jQuery？

让我先给你 jQuery 版本，因为它更容易。

// load when page is done loading
$(function(){

  // jQuery is just like CSS in that you use selectors to target a node element
  $("#Generate").on("click", function(){

    // get form values for each style we need
    var user = $('#user_number').val();
    var style = $('form input[name=banner_type]:checked').val();
    var type = $('form input[name=banner_style]:checked').val();

    // set image variable by concatenating the values together
    var image = "http://folding.extremeoverclocking.com/sigs/sigimage.php?u=" + user + style + type;

    // insert image path using the image variable set above into element with id of "URL"
    $("#URL").html( image );
  });

}); // close jquery on page load

现在用纯 JavaScript... 来了。

// have to iterate each group to obtain the value
// function has borrowed from http://www.somacon.com/p143.php/
function getCheckedValue(radioObj) {
if(!radioObj)
    return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
    if(radioObj.checked)
        return radioObj.value;
    else
        return "";
for(var i = 0; i < radioLength; i++) {
    if(radioObj[i].checked) {
        return radioObj[i].value;
    }
}
return "";
}

var user = document.getElementById('user_number').value;
var style = getCheckedValue('banner_style');
var type = getCheckedValue('banner_type');

// set image variable
var image = "http://folding.extremeoverclocking.com/sigs/sigimage.php?u=" + user + style + type;

// insert image into element node with ID of "URL"
document.getElementById("URL").innerHTML = image;