“Checked” by default button & checkbox IDE errors

Time2Code · February 19, 2022, 10:04am

I’m using an ipad mini to go through these courses and I am consistently having problems with the website’s IDE recognizing my code. I am using a Safari browser but also tried the Chrome browser getting the same results. I have checked this same coding in a separate HTML app and the code runs fine. I keep getting an error “ You should not change the inner text of the “Indoor” label. You should not change the inner text of the “Loving” label.” when I run this code.
As you can see, there is “nothing” wrong with my code, but I keep getting the “error” message above that keeps me from advancing (or registering this “lesson” complete) and move on to the next “lesson”. Unless someone can see something in my code that I can’t that is causing this error, I need advice as to how to get this “lesson” checked as “completed”.

Thanks to anyone who can help.
Like I said I tried the Chrome app and am getting the same results, so it’s not my browser. Thus far I’ve had similar issues while using the IDE for this course but I’ve been able to work around the others, this one, not so much.
I believe my coding is correct because I’ve tried the same “exact” code in my HTML app that I have and I’m getting the correct results. Technically, this code is “showing” the “correct” results, in my “compiled” window, but I am getting this error message that is keeping me from moving forward to the next lesson.

So thanks to anyone who can help with this.

  **Your code so far**


<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>

<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

<p>Things cats love:</p>
<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
  <li>flea treatment</li>
  <li>thunder</li>
  <li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
  <label for="indoor">
      <input id="indoor" value="indoor" type="radio" name="indoor-outdoor" checked>Indoor</label>
  <label for="outdoor">
    <input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor">Outdoor</label><br>
  <label for="loving">
    <input id="loving" type="checkbox" name="personality" value="loving" checked>Loving</label>
  <label for="lazy">
    <input id="lazy" type="checkbox" name="personality" value="lazy">Lazy</label>
  <label for="energetic">
    <input id="energetic" type="checkbox" name="personality" value="energetic">Energetic</label>
    <br>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</main>

  **Your browser information:**

User Agent is: Mozilla/5.0 (iPad; CPU OS 12_5_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.2 Mobile/15E148 Safari/604.1

Challenge: Check Radio Buttons and Checkboxes by Default

Link to the challenge:

ilenia · February 19, 2022, 1:53pm

it seems you deleted spaces from the label texts

LucLH · February 19, 2022, 3:46pm

Hi @Time2Code,

I tested your code and it passes on my side. It seems to have often issues on the mobile devices. The first thing people advice usually is to check that your browsers (Safari/Chrome/etc) be updated with the last version.

Do you have a recent iPad and do they continue to do updates for these apps?

Time2Code · February 20, 2022, 4:25am

Thanks LucLH, I had a feeling that was the issue.
I have an older model ipad that is very rapidly becoming obsolete. At this point, because of the model ipad that I have I don’t believe there will be anymore updates for it. It is at its capacity.

I guess as long as i can get the code to work (for now) on my HTML app that is all that really matters. That I am coding correctly “somewhere”.

Thanks for your response LucLH, much appreciated.

Time2Code

Time2Code · February 20, 2022, 4:31am

Hi Ilenia,
Can you give me an example?
I got another reply telling me the possible cause of my problem may be based more around the model of ipad and its “updates”, than my actual code. Cause as I stated in the post, I have an HTML coding app that I have entered the same exact coding into and the code runs and works fine with. But if you see something that I missed, that could be the culprit, please show me what you mean.

Thanks, much appreciated,
Time2Code

LucLH · February 20, 2022, 6:24am

You are welcome @Time2Code, actually I never tried on mobile device so it is a little in the fog I am talking. As you said the important is that you are right and understood the point the course is about. Do you have a computer/laptop?

lasjorg · February 20, 2022, 5:17pm

The version of Safari you have seems old, what version of Chrome did you install, was it the latest?

I’m guessing the use of optional chaining in the test might fail in old browsers.

assert.equal(document.querySelector('label[for="indoor"]')?.innerText?.trim(), 'Indoor');

assert.equal(document.querySelector('label[for="loving"]')?.innerText?.trim(), 'Loving');

Does this pen work for you, it should log the text “Indoor” in the console.

Time2Code · February 21, 2022, 11:04am

Hi lasjorg,
As far as the Chrome version was concerned that I tried, I think its like the Safari version that I have (i.e., not the latest version). Because my device is older I can only get updated versions just so far before the updates stop, which I think was the case with the Chrome too.
As for the result in the console at “freecodecamp.org” I get the correct result, it’s the “test” window that’s giving me an error and not allowing me to move out of that lesson to complete the course (see screenshot below) because it is “telling” something I have made a mistake that needs correcting before it will accept my lesson as “complete”. But there is nothing more I can do because my code is already correct.

Since I am “new” to programming I have no idea what you’re talking about with “optional chaining”. Please clarify for me. Am I supposed to do something with this code you have shown me?

Time2Code

lasjorg · February 21, 2022, 11:17am

Can you please start by telling me if the Codepen I linked to works for you? It should have the Codepen console open. Or you can click the console button at the bottom.

If the Codepen doesn’t work for you the challenge tests won’t work either.

I mean the browser console. If you have F keys you can use F12 and then go to the console tab (or safari dev tools menu)

Optional chaining is just a JS feature. You don’t really need to worry about it, but if your browser is too old it will be unsupported and the two challenge tests for the label text will fail.

Time2Code · February 21, 2022, 11:44am

Yes, the Codepen link works, the code and console work fine. I have a separate HTML app too, that also works fine with the exact same code. I just can’t get the “freecodecamp.org” website console to recognize that I have the right code and result.
I’m not using a desktop computer (I don’t currently have one). I am using an iPad mini tablet so I can’t get the F12, even on my portable keyboard to work.

lasjorg · February 21, 2022, 12:17pm

Just so I’m 100% sure, the Codepen is logging “Indoor” in the console?

Pretty sure you can get to the browser console using the dev tools menu. I don’t use Safari but I linked to the support article. If you can get the browser console up, run the tests and look at the browser console for any errors. Post a screenshot of any errors you see.

There is nothing wrong with the challenge or the tests. It is most likely a device or browser issue (or both). If so, we can’t really do anything about it.

Just as an FYI, the only projects you need to complete to get the RWD certificate is the last 4 projects. So you can just skip this challenge and move forward (use the menu on the /learn page and just pick the next challenge).

Time2Code · February 21, 2022, 12:34pm

Yes, the Codepen is logging a “Indoor” in the console. And it is “checked” like my screenshot above.
Like I said because I am using an iPad I don’t have a standard “menu” bar like desktop computers. Mine is extremely limited (i.e., “copy”, “create pdf”, “save to file”, etc). The few “dev tools” I have available to me do not include a “console”. They are in my “settings” under “advanced/experimental kit features”.
And actually I have moved on and finished the rest of the HTML course. I thought I might need all the lessons “marked”, on the website, in order to get the certificate, but if I just need to complete the last few challenges for that then, it’s no big deal. I’ve been able to get the correct result using other methods and that’s what really matters.

ilenia · February 23, 2022, 12:26pm

would you be able to give your user agent? Just copy and paste here what the webpage shows you
What is my user agent? - WhatIsMyBrowser.com

Time2Code · February 24, 2022, 9:43am

This is the info about my browser version:

Thanks for letting me figure out a way to find my browser version, etc. Much appreciated.

Time2Code

system · August 25, 2022, 9:43pm

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.