Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Challenge: Manage Element Properties and Attributes | DOM Manipulation for Interactive Web Development
Advanced JavaScript Mastery

bookChallenge: Manage Element Properties and Attributes

Task

You're working on a product page where you'll display product information and allow users to toggle the availability status.

  1. Set product name to "Smartphone";
  2. Set the initial price to "499.99";
  3. Toggle Availability Status Using Attributes: When the button is clicked:
    • Check if the <button> has the attribute data-available;
    • If data-available is present, remove it and update the text content to "Unavailable".
    • If data-available is absent, add it with a value of "true" and update the text content to "Available".
  4. Display the Availability Status:
    • Check if the data-available attribute is present on the button;
    • Display "In Stock" in availability-status if data-available is present, or "Out of Stock" if it's absent.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Use textContent to set the product name to "Smartphone";
  • Use value to set the initial price to "499.99".
  • Use hasAttribute to check if the <button> has the attribute data-available;
  • If data-available is present, use removeAttribute to remove it and update textContent to "Unavailable";
  • If data-available is absent, use setAttribute to add it with a value of "true" and update textContent to "Available".
  • Use getAttribute to check if the data-available attribute is present on the button.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 2. ChapterΒ 8

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

bookChallenge: Manage Element Properties and Attributes

Task

You're working on a product page where you'll display product information and allow users to toggle the availability status.

  1. Set product name to "Smartphone";
  2. Set the initial price to "499.99";
  3. Toggle Availability Status Using Attributes: When the button is clicked:
    • Check if the <button> has the attribute data-available;
    • If data-available is present, remove it and update the text content to "Unavailable".
    • If data-available is absent, add it with a value of "true" and update the text content to "Available".
  4. Display the Availability Status:
    • Check if the data-available attribute is present on the button;
    • Display "In Stock" in availability-status if data-available is present, or "Out of Stock" if it's absent.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Use textContent to set the product name to "Smartphone";
  • Use value to set the initial price to "499.99".
  • Use hasAttribute to check if the <button> has the attribute data-available;
  • If data-available is present, use removeAttribute to remove it and update textContent to "Unavailable";
  • If data-available is absent, use setAttribute to add it with a value of "true" and update textContent to "Available".
  • Use getAttribute to check if the data-available attribute is present on the button.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 2. ChapterΒ 8
some-alt