From b848de3e54263f2aa6bb2f4470a1539590ded846 Mon Sep 17 00:00:00 2001 From: StephenMuya Date: Sat, 25 Jan 2025 22:07:38 +0300 Subject: [PATCH 1/5] Javascript access data attribute page improved --- .../solve_html_problems/use_data_attributes/index.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/files/en-us/learn_web_development/howto/solve_html_problems/use_data_attributes/index.md b/files/en-us/learn_web_development/howto/solve_html_problems/use_data_attributes/index.md index 1e4c9f02c5e082f..d6a81cc85c44658 100644 --- a/files/en-us/learn_web_development/howto/solve_html_problems/use_data_attributes/index.md +++ b/files/en-us/learn_web_development/howto/solve_html_problems/use_data_attributes/index.md @@ -28,8 +28,16 @@ Reading the values of these attributes out in [JavaScript](/en-US/docs/Web/JavaS To get a `data` attribute through the `dataset` object, get the property by the part of the attribute name after `data-` (note that dashes are converted to {{Glossary("camel_case", "camel case")}}). + +```html + +``` ```js -const article = document.querySelector("#electric-cars"); +const article = document.querySelector('#something [data-id="2"]') // The following would also work: // const article = document.getElementById("electric-cars") From 1f7e8a29115744a43ff4602092f385a9728d301d Mon Sep 17 00:00:00 2001 From: Stephen Mutheu Muya Date: Sat, 25 Jan 2025 22:20:06 +0300 Subject: [PATCH 2/5] Update files/en-us/learn_web_development/howto/solve_html_problems/use_data_attributes/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../howto/solve_html_problems/use_data_attributes/index.md | 1 - 1 file changed, 1 deletion(-) diff --git a/files/en-us/learn_web_development/howto/solve_html_problems/use_data_attributes/index.md b/files/en-us/learn_web_development/howto/solve_html_problems/use_data_attributes/index.md index d6a81cc85c44658..a99f0f1c1173e36 100644 --- a/files/en-us/learn_web_development/howto/solve_html_problems/use_data_attributes/index.md +++ b/files/en-us/learn_web_development/howto/solve_html_problems/use_data_attributes/index.md @@ -28,7 +28,6 @@ Reading the values of these attributes out in [JavaScript](/en-US/docs/Web/JavaS To get a `data` attribute through the `dataset` object, get the property by the part of the attribute name after `data-` (note that dashes are converted to {{Glossary("camel_case", "camel case")}}). - ```html ``` ```js -const article = document.querySelector('#something [data-id="2"]') +const article = document.querySelector('#something [data-id="2"]'); // The following would also work: // const article = document.getElementById("electric-cars") From 869e10bbd6f3c365c69c01fd78f936cbddbe9c40 Mon Sep 17 00:00:00 2001 From: Stephen Mutheu Muya Date: Sat, 25 Jan 2025 22:21:13 +0300 Subject: [PATCH 5/5] Update files/en-us/learn_web_development/howto/solve_html_problems/use_data_attributes/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../howto/solve_html_problems/use_data_attributes/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/files/en-us/learn_web_development/howto/solve_html_problems/use_data_attributes/index.md b/files/en-us/learn_web_development/howto/solve_html_problems/use_data_attributes/index.md index 9bedc0ca66e10e8..3bd4094b1117a9a 100644 --- a/files/en-us/learn_web_development/howto/solve_html_problems/use_data_attributes/index.md +++ b/files/en-us/learn_web_development/howto/solve_html_problems/use_data_attributes/index.md @@ -35,6 +35,7 @@ To get a `data` attribute through the `dataset` object, get the property by the
  • C
    • ``` + ```js const article = document.querySelector('#something [data-id="2"]'); // The following would also work: