質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

sliderを連番で複数追加、削除したい。

cfds
cfds

総合スコア4

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1回答

0評価

1クリップ

389閲覧

投稿2021/12/28 13:40

前提・実現したいこと

[html/javascript/jquery]
rangeを使ってsliderを表示するサイトを作成しています。
追加ボタンをクリックした時にsliderが追加され、削除ボタンをクリックすると要素が消されるようにしたいです。(1番上は消されない。)

発生している問題・エラーメッセージ

このエラーをどうしても解決することが出来ません。type errorは打ち間違いということでしょうか。

Uncaught TypeError: Cannot read properties of null (reading 'lastElementChild') at HTMLButtonElement.<anonymous> (renban.html:84) at HTMLButtonElement.dispatch (jquery.min.js:2) at HTMLButtonElement.v.handle (jquery.min.js:2)

該当のソースコード

javascript

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>renban.html</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css"> </head> <body> <div id="target" class='sliderContainer'> <div class ="brislider"> <label for="bri">bri</label><input type="range" value="0" id="bri" min="0" max="254" step="1" oninput="color_change_range()"> <input type="number" value="0" min="0" max="255" id="bri_num" oninput="color_change_num()"> </div> <div class ="satslider"> <label for="sat">sat</label><input type="range" value="0" id="sat" min="0" max="254" step="1" oninput="color_change_range()"> <input type="number" value="0" min="0" max="255" id="sat_num" oninput="color_change_num()"> </div> <div class ="hueslider"> <label for="hue">hue</label><input type="range" value="0" id="hue" min="0" max="255" step="1" oninput="color_change_range()"> <input type="number" value="0" min="0" max="255" id="hue_num" oninput="color_change_num()"> </div> </div> <div class="start" style="padding: 5px 20px;"> <button id="tsuika">追加</button> <button id="sakujo">削除</button> </div> <script> $(function(){ //スライダ設定関数 function setSliderGroup(target) { // 色が変更された時に実行(スライダー) function color_change_range() { var bri = document.getElementById("bri").value; var sat = document.getElementById("sat").value; var hue = document.getElementById("hue").value; //numberに反映 document.getElementById("bri_num").value = bri; document.getElementById("sat_num").value = sat; document.getElementById("hue_num").value = hue; } // 色が変更された時に実行(数値入力) function color_change_num() { var bri = document.getElementById("bri_num").value; var sat = document.getElementById("sat_num").value; var hue = document.getElementById("hue_num").value; //rangeに反映 document.getElementById("bri").value = bri; document.getElementById("sat").value = sat; document.getElementById("hue").value = hue; } } //スライダを設定 setSliderGroup($(".sliderContainer")) //sliderのidを連番にする $('div.sliderContainer').each(function(i){ $(this).attr('id','target' + (i+1)); }); $('div.brislider').find('input[type="range"]').each(function(i) { $(this).attr("id",'bri' + (i+1)); }); $('div.satslider').find('input[type="range"]').each(function(i) { $(this).attr("id",'sat' + (i+1)); }); $('div.hueslider').find('input[type="range"]').each(function(i) { $(this).attr("id",'hue' + (i+1)); }); //追加ボタン $('#tsuika').on('click', function() { const elements = document.getElementById("target"); const copied = elements.lastElementChild.cloneNode(true); //追加要素にスライダを設定 setSliderGroup($(copied)) elements.appendChild(copied); }) //削除ボタン $("#sakujo").on("click", function() { const elements = document.getElementById("target"); //スライダ郡が一つだけだったら何もしない if ($(elements).children().length == 1) return elements.lastElementChild.remove(); }); }); </script> </body> </html>

試したこと

sliderを3つ共追加したいので、idを同じものにコピーされるようにしました。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。