如何在 Javascript 或 J-Query 中动态访问用户输入的输入字段数据

Question

求助！！！....我无法动态访问用户在 Input 字段中输入的数据！

我是一名课程设计者，正在尝试制作 'Matching'-activity（18 个问题和 18 个可能的答案），其中答案选择当学生 'used up' 在输入字段中键入该选择的字母（在本例中为 "r"）时，他们会被 1 个 1 个动态地划掉。这是这 18 场比赛中的一场比赛的 HTML：（提示：注意 "id" 属性）

HTML

<input title="Question 18 - type 'R' into this input field" 
    class="questions" maxlength="1" id="18" onblur="My_Blur_Fx(this);">   
</input>

<span class="r_as_selected, choices" id="r">  <!--I use the first class ('r_as_selected') in the J-Query example below, and the 2nd class ('choices') in the Javascript example below.-->
    [Choice] R. (**All this span should soon be crossed-out.**) 
</span>

我想我可以通过 "change" 活动来实现这一目标。然而，我的 Javascript 和我的 J-Query 似乎都无法做到这一点，因为它们都无法动态访问用户输入的内容（PHP 通常会通过 GET 访问的内容或 POST).

J-查询

我的 J-Query 尝试动态访问此用户输入...

$("input").change(function(){

    $("input"[value="r"])
        .add('.r_as_selected')
            .eq(1).css({'color': 'red', 'text-decoration': 'line-through'})
});

...失败是因为，虽然它可以划掉“#r”答案选项，但每当他们输入任何内容时它也会划掉它...所以 [value='r'] 部分该代码无法将 JUST 定位到某人键入 'r'.

的字段

Javascript

我的 Javascript- 尝试动态访问此用户输入...

<script> 
    function My_Blur_Fx(x) {
        var userInput = document.getElementById(x).value;      
        var userChoices = document.getElementsByClassName("choices").id;

        var i;
        for(i = 0; i < 18; i++)
                { if (userChoices[i].attributes[1].value == userInput) {
                        /*Note: "attributes[1] is my way of accessing the 2nd attribute in the HTML span above, which is 'id="r"'*/ 
                    userChoices[i].style.textDecoration = "line-through";};
                };
    }
</script>

...也失败了，因为 'Input' 是一个 "Element"，其 "Value," 由 DOM 定义为 "NULL,"...所以上面的第 3 行给出了一个错误。任何其他可能相关的 DOM-修饰符，而不是 .value（即 .innerHTML / .nodeValue / .attributes）都不能访问该用户输入的值.所以似乎 'Input' 元素无法动态访问。 . . . （任何建议...J-Query、Javascript 或其他？）

Answer 1

也许有不止一个错误，但我看到你的代码 $("input"[value="r"]) 与 $(undefined) 相同。您必须改用 $('input[value=\'r\']')。

Answer 2

您不能使用属性选择器来匹配用户输入，它只匹配静态属性，不匹配动态值。您可以使用 .filter() 来搜索与选择器匹配且具有特定值的元素。

$("input").change(function() {
    $("input").filter(function() {
        return this.value == 'r';
    }).add(".r_as_selected")
        .eq(1).css({'color': 'red', 'text-decoration': 'line-through'});
});

您在 MyBlurFx() 中遇到了几个问题。

document.getElementById(x).value 不起作用，因为 x 是元素，而不是它的 ID。你应该只使用 x.value.
document.getElementsByClassName("choices").id 不会工作，因为 getElementsByClassName() returns 一个 NodeList，不是单个元素，所以它没有 id 属性。但是您不需要 ID，只需使用 document.getElementsByClassName("choices")，因为 for 循环对元素而不是 ID 进行操作。

如何在 Javascript 或 J-Query 中动态访问用户输入的输入字段数据

How to dynamically access user-entered Input-field-data, in Javascript or J-Query

javascript

jquery

user-input

HTML

J-查询

Javascript