using query selectors to edit html content

Question

Note: This question is different than the one posed in posts about what querySelectorAll and getElementsById. Because I also can't change the image

I am trying to use query selectors to change HTML content in the following ways:

to change the leading h1 text from white to blue
to change the only image on the page to a different image
to change all the paragraphs text color from purple to black

I tried using document.querySelector and document.querySelectorAll. I was able to successfully change the h1 text to blue. However, I was not able to change the image. Nor was I able to change the paragraphs to be black.

const blueh1 = document.querySelector('h1');

blueh1.style.color = 'blue'

const mainImage = document.querySelector('.mainmain');

mainImage.src = 'img/jevon_in_barra.jpg';

console.log(mainImage);

const paragraphs = document.querySelectorAll('p');
paragraphs.style.color = 'black';

HTML code below:

<!doctype html>

<html lang="en">
    <head>
  <meta charset="utf-8">


  <title>Marketing Page Home</title>
  <link href="./css/index.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Roboto" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,800&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/a791a74a1f.js" crossorigin="anonymous"></script>
  <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
  <![endif]-->
    </head>


    <body>

        <container>
            <nav>
                <a href="index.html">Home</a>
                <a href="about.html">About Us</a>
                <a href="#">Sign Up</a>
                <a href="https://expat-journal.emilyelri.now.sh/login">Log In</a>
                <a href="#">Contact</a>
            </nav>
        </container>
        <container class="h1-container">
            <h1 class="logo-font">Expat Journal</h1>
        </container>
        <section class="top">
            <container>
                <h2>Show and Tell, except for Expats</h2>
                <h3>A platform for travel story-telling</h3>
                <button>
                    <a href="https://expat-journal.emilyelri.now.sh/login" class="mainmain">Get started for free</a>
                </button>
            </container>
        </section>

        <section class="middle">
            <img src="img/travel-meeting.jpg" alt="">
        </section>

        <section class="bottom">
            <container>
                <container class="photos-container">
                    <i class="far fa-image"></i>
                    <h3>Photos</h3>
                    <p>Show off pics of the amazing places you've been around the world. Users can visit site and see photos laid out in a grid, with the ability to like, comment and share!</p>
                </container>
                <container class="stories-container">
                    <i class="fas fa-video"></i>
                    <h3>Stories</h3>
                    <p>Keep your friends and family updated with beautiful story content. You can select to show for a limited period of time or retain permanently on your profile.</p>
                </container>
                <container class="connect-container">
                    <i class="fas fa-user-friends"></i>
                    <h3>Connect</h3>
                    <p>Users can follow your profile as well as like, comment and share your content. Inspire others to travel and share their experiences!</p>
                </container>
            </container>
        </section>

        <footer>
            <nav class="footer">
                <a href="index.html">Home</a>
                <a href="about.html">About Us</a>
                <a href="#">Sign Up</a>
                <a href="https://expat-journal.emilyelri.now.sh/login">Log In</a>
                <a href="#">Contact</a> 
            </nav>
        </footer>
    </body>
    <script type="text/javascript" src="index.js"></script>
</html>

Nothing is logging to the console. I'm getting a reference error that says document is not defined.

*I'm getting a reference error that says document is not defined* That's pretty weird, are you sure you're running this code in a standard Javascript environment? Can you post a [MCVE] illustrating the error (or, lacking that, at least a link)? — CertainPerformance, Oct 26 '19 at 22:40
No. But should that matter? The h1 edit worked just fine. @MaximilianFixl — Jevon Cochran, Oct 26 '19 at 22:46
const blueh1 = document.querySelector('h1'); ^ ReferenceError: document is not defined at Object. (/Users/jevon/Documents/Lamda Files/Build-Week-Expat-Journal/UI/index.js:1:16) at Module._compile (internal/modules/cjs/loader.js:775:14) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) @CertainPerformance — Jevon Cochran, Oct 26 '19 at 22:49
I'm running the code in a js file. I just realized that document.querySelector will work for me but document.querySelectorAll won't @SagarV — Jevon Cochran, Oct 26 '19 at 23:00
What's the error when running querySelectorAll. If QS is working, then QSA will also work. — Sagar V, Oct 26 '19 at 23:06
I'm pretty sure the *actual* error you're getting is different from what you're saying it is. If `document` wasn't defined, the first line of code would throw an error, but you're saying it doesn't. You *should* be getting `Uncaught TypeError: Cannot set property 'color' of undefined`. — CertainPerformance, Oct 26 '19 at 23:07

Addis · Accepted Answer · 2019-10-26T23:06:05.333

0

Place <script type="text/javascript" src="index.js"></script> inside the body tag just before the closing tag:

<body>
  ...
  <script type="text/javascript" src="index.js"></script>
</body>

The querySelectorAll returns a nodelist not a single element, so you can use it like:

const paragraphs = document.querySelectorAll('p');
[...paragraphs].forEach(paragraph => paragraph.style.color = 'black');

edited Oct 26 '19 at 23:06

answered Oct 26 '19 at 22:58

Addis

2,480
2
13
21

Tried that just now, didn't work @Addis – Jevon Cochran Oct 26 '19 at 23:03
If your issue is querySelectorAll, check my edited answer – Addis Oct 26 '19 at 23:07
Your code worked. Thanks! However, the image is still not changing. Any idea on how to solve that problem? @addis – Jevon Cochran Oct 26 '19 at 23:15
what do you want to do with the image? – Addis Oct 26 '19 at 23:21
I simply want to use the .setAttribute method to change it to a different image. @addis – Jevon Cochran Oct 26 '19 at 23:25
You selected an `a` tag not a picture or `img`. Which one do you want to change, the picture or the link? – Addis Oct 26 '19 at 23:27
If you want to change the source of the img: `` and inside the js file change the class name like: `const mainImage = document.querySelector('.myImg');` – Addis Oct 26 '19 at 23:35
1

Oh wow, that was a dumb mistake. Thanks for pointing that out for me. Fixed! @addis – Jevon Cochran Oct 26 '19 at 23:57

using query selectors to edit html content

1 Answers1