返回未定义的Javascript可见元素[关闭]答案

【问题标题】：Javascript Visible Element returning undefined [closed]返回未定义的Javascript可见元素[关闭]
【发布时间】：2016-04-29 14:51:10
【问题描述】：

我试图点击的 HTML 代码是

<button type="submit" class="flatbutton">Send</button>

var i;
var button = document.getElementsByClassName("flatbutton");
    for (i = 0; i < button.length; ++i) {
        if (button[i].type == "submit") {
            console.log(button[i].innertext);
        }
    }

由于某种原因，返回的所有内容都是未定义的。这没有意义，它应该返回“Send”。

我宁愿只使用 Javascript 而不是 JQuery

【问题讨论】：

你怎么能喜欢 vanilla JS 而不是 jQuery，就像你曾经尝试过 jQuery 一样？

标签： javascript html dom

【解决方案1】：

代码中的简单错字，innertext 应该是 innerText

var i;
var button = document.getElementsByClassName("flatbutton");
for (i = 0; i < button.length; ++i) {
  if (button[i].type == "submit") {
    console.log(button[i].innerText);
  }
}

&lt;button type="submit" class="flatbutton"&gt;Send&lt;/button&gt;

【讨论】：

你在.innerText之间加了一个空格
@Jhecht：谢谢，更新！！！

【解决方案2】：

如果想获得单个类元素，最好避免循环。用这个。如果您有多个类，请使用循环。

 <button type="submit" class="flatbutton">Send</button>
 var button = document.getElementsByClassName("flatbutton")[0].innerText;
 console.log(button);

【讨论】：

【解决方案3】：

你可以像这样在 jQuery 中做到这一点：

$(".flatbutton[type='submit']").each(function()
{
    console.log($(this).html());
});

或者你只是使用 vanilla JS 让一切变得更复杂：

var btns = document.getElementsByClassName("flatbutton");
for(var i=0;i<btns.length;i++)
{
    var btn=btns[i];
    if(btns.getAttribute("type") == "submit")
    {
        console.log(btn.innerHTML);
    }
}

【讨论】：

【解决方案4】：

代替

console.log(button[i].innertext);

使用

console.log(button[i].textContent);

【讨论】：

【解决方案5】：

您可以在按钮上设置数据属性并从那里获取其值。像这样。

<button type="submit" class="flatbutton" data-value="send" >Send</button>

var buttonvalue = document.getElementsByClassName("flatbutton").data.value;

为什么不来自 JQUERY？或者您可以尝试像这样尝试 .value 来获取“发送”值。

        var i;
        var button = document.getElementsByClassName("flatbutton");
        for (i = 0; i < button.length; ++i) {
        if (button[i].type == "submit") {
        console.log(button[i].value);
        }
        }

【讨论】：

【解决方案6】：

将innertext 更改为innerText。您将获得所需的结果。

【讨论】：