js getAttribute hasAttributeでエラーが出る

やりたいこと

独自要素のdata-jp及びdata-enをinnerHTMLに代入したいです（言語を変更するため）
そのために、hasAttribute(),getAttribute()を使用しました。

ですが、

Uncaught TypeError: content[ele].hasAttribute is not a function
at initialize (index.js:6)
at index.html:191

と表示されます
しかし、実行結果は成功しました

実行環境はmacとgoogle chromeです

js
1var content = document.getElementsByClassName('lang');
2function initialize() {
3    for (let ele in content) {
4        if (content[ele].hasAttribute("data-jp")) {
5            content[ele].innerHTML = content[ele].getAttribute("data-en");
6        }
7    };
8}
9function switchLanguageToJp() {
10    for (let ele in content)
11        if (content[ele].hasAttribute('data-jp'))
12            content[ele].innerHTML = content[ele].getAttribute('data-jp');
13}
14function switchLanguageToEn() {
15    for (let ele in content)
16        if (content[ele].hasAttribute('data-en'))
17            content[ele].innerHTML = content[ele].getAttribute('data-en');
18}
19
20}
21

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="utf-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <link href="flatty/theme/assets/css/bootstrap.css" rel="stylesheet">
9    <link href="flatty/theme/assets/css/main.css" rel="stylesheet">
10    <link href='index.css' rel='stylesheet' type='text/css'>
11    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
12    <script type="text/javascript" src="js/jquery.rotate.js"></script>
13    <script type="text/javascript" src="js/index.js"></script>
14    <script src="flatty/theme/assets/js/bootstrap.min.js"></script>
15</head>
16
17<body>
18
19    <!-- Fixed navbar -->
20    <div class="navbar navbar-default navbar-fixed-top">
21        <div class="container">
22            <div class="navbar-header">
23                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
24                    <span class="icon-bar"></span>
25                    <span class="icon-bar"></span>
26                    <span class="icon-bar"></span>
27                </button>
28                <a class="navbar-brand navbar-left" href="#">
29
30                    <b class="lang" data-en="About Masujima Ryohei" data-jp="増嶋涼平について"></b>
31                </a>
32            </div>
33            <div class="navbar-collapse collapse">
34                <ul class="nav navbar-nav navbar-right">
35                    <li>
36                        <input type="button" class="en " value="日本語" onclick='switchLanguageToJp();' />
37                        <input type="button" class="jp" value="English" onclick='switchLanguageToEn()' />
38                    </li>
39                </ul>
40            </div>
41        </div>
42    </div>
43    <script>
44        initialize();
45    </script>
46</body>
47</html>

kszk311

2018/04/09 10:02

念のためHTMLの方も記載してもらえますか。

行動規範の内容に同意します

回答1件

ベストアンサー

配列ですら無いHTMLCollectionオブジェクトをfor-inでぶん回す事自体が間違っています. ここは素直に通常のfor文でループしましょう.

JavaScript
1var content = document.getElementsByClassName('lang');
2function initialize() {
3    //for (let ele in content) {
4    for(let ele = 0, len = content.length; i<len; i++){
5        if (content[ele].hasAttribute("data-jp")) {
6            content[ele].innerHTML = content[ele].getAttribute("data-en");
7        }
8    };
9}
10