JavaScript Uncaught TypeError: xxx.setAttribute is not a functionの解決方法

環境
Google Chrome  114.0.5735.199(Official Build) (64 ビット)
Windows 11 Pro 64bit

操作例
クラス"city"を指定してidを追加します

修正前

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div class="city">tokyo</div>
<div class="city">oosaka</div>
<div class="city">fukuoka</div>
<button onclick="myFunction()">表示</button>
<script>
function myFunction() {
const elems = document.getElementsByClassName('city');
console.log(elems);
elems.setAttribute('id', 'tt');
}
</script>
<div class="city">tokyo</div> <div class="city">oosaka</div> <div class="city">fukuoka</div> <button onclick="myFunction()">表示</button> <script> function myFunction() { const elems = document.getElementsByClassName('city'); console.log(elems); elems.setAttribute('id', 'tt'); } </script>
<div class="city">tokyo</div>
<div class="city">oosaka</div>
<div class="city">fukuoka</div>


<button onclick="myFunction()">表示</button>

<script>
function myFunction() {
const elems = document.getElementsByClassName('city');

console.log(elems);

elems.setAttribute('id', 'tt');
}
</script>

エラーメッセージ
Uncaught TypeError: elems.setAttribute is not a function

修正後
1つの要素に対して実行する場合は「インデックス番号」を指定して「DOM要素」にします。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div class="city">tokyo</div>
<div class="city">oosaka</div>
<div class="city">fukuoka</div>
<button onclick="myFunction()">表示</button>
<script>
function myFunction() {
const elems = document.getElementsByClassName('city');
console.log(elems);
elems[0].setAttribute('id', 'tt');
}
</script>
<div class="city">tokyo</div> <div class="city">oosaka</div> <div class="city">fukuoka</div> <button onclick="myFunction()">表示</button> <script> function myFunction() { const elems = document.getElementsByClassName('city'); console.log(elems); elems[0].setAttribute('id', 'tt'); } </script>
<div class="city">tokyo</div>
<div class="city">oosaka</div>
<div class="city">fukuoka</div>


<button onclick="myFunction()">表示</button>

<script>
function myFunction() {
const elems = document.getElementsByClassName('city');

console.log(elems);

elems[0].setAttribute('id', 'tt');
}
</script>

 

JavaScript

Posted by arkgame