Pickles Exercise – change the text by using DOM

<!DOCTYPE html>

<head>
    <title>Pickles</title>
    <!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
    <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

</head>

<body>
    <!--PLEASE LEAVE THIS LINE ALONE! MAKE YOUR CHANGES USING JAVASCRIPT!!-->
    <h1>Pickles Are <span>Delicious</span></h1>
</body>

</html>

Select the element that currently reads "Delicious".

Change its text to read "Disgusting" USING JAVASCRIPT.

// YOUR CODE GOES IN HERE:
const pickleTaste = document.getElementsByTagName('span').textContent = 'Disgusting';
console.log(pickleTaste);

I tried with innerText, textContent and innerHTML, However solution doesn’t pass.

>Solution :

// document.getElementsByTagName() returns an array, not a singular node
var PickleTaste = document.getElementsByTagName("span");
PickleTaste[0].textContent = "Disgusting";
console.log(PickleTaste);
<!DOCTYPE html>
<html>
  <head>
      <title>Pickles</title>
      <!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
      <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
      <!--PLEASE LEAVE THIS LINE ALONE! MAKE YOUR CHANGES USING JAVASCRIPT!!-->
      <h1>Pickles Are <span>Delicious</span></h1>
  </body>
</html>

Can’t do much to prove I didn’t copy Anil kumar

Leave a Reply