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

Integer + 2x radio button set inputs --> output

本文关键字：输出 输入 2x 单选按钮 设置 整数      更新时间：2023-09-26

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

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

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

<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的东西，或者类似的东西。

Sheesh， no 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;
相关文章：