0

I have write a login page in react like this:

import React from "react";
import styles from "./Login.module.css";

const Login: React.FC = () => {

    React.useEffect(() => {
           
    }, []);

    const openCity = (evt: any, cityName: any): void => {
      let i: number;
      const tabcontent = document.querySelectorAll(`.${styles.tabcontent}`);
      debugger
      for (i = 0; i < tabcontent.length; i++) {
        debugger
        (tabcontent[i] as HTMLElement).style.display = "none";
      }
      const tablinks = document.querySelectorAll(`.${styles.tablinks}`);
      for (i = 0; i < tablinks.length; i++) {
        (tablinks[i] as HTMLElement).className = (tablinks[i] as HTMLElement).className.replace(" active", "");
      }
      const cityElement = document.getElementById(cityName);
      if (cityElement) {
        cityElement.style.display = "block";
      }
      (evt.currentTarget as HTMLElement).className += " active";
    };

  return (
    <div className={styles.loginContainer}>
      <div className={styles.loginForm}>
        <div className={styles.loginTabs}>
          <button className={styles.tablinks} onClick={(e)=>{openCity(e,"London")}}>London</button>
          <button className={styles.tablinks} onClick={(e)=>{openCity(e,"Paris")}}>Paris</button>
          <button className={styles.tablinks} onClick={(e)=>{openCity(e,"Tokyo")}}>Tokyo</button>
        </div>
        <div id="London" className={styles.tabcontent}>
          <h3>London</h3>
          <p>London is the capital city of England.</p>
        </div>

        <div id="Paris" className={styles.tabcontent}>
          <h3>Paris</h3>
          <p>Paris is the capital of France.</p>
        </div>

        <div id="Tokyo" className={styles.tabcontent}>
          <h3>Tokyo</h3>
          <p>Tokyo is the capital of Japan.</p>
        </div>
      </div>
    </div>
  );
}

export default Login;

when I want to switch the tab element, and tried the get the css module element like this:

 const tabcontent = document.querySelectorAll(`.${styles.tabcontent}`);

shows error:

bundle.js:2764 Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '.Login_tabcontent__+4DLD' is not a valid selector.
    at openCity (http://dev-ai.poemhub.top/static/js/bundle.js:2764:33)
    at onClick (http://dev-ai.poemhub.top/static/js/bundle.js:2793:13)
    at HTMLUnknownElement.callCallback (http://dev-ai.poemhub.top/static/js/bundle.js:98573:18)
    at Object.invokeGuardedCallbackDev (http://dev-ai.poemhub.top/static/js/bundle.js:98617:20)
    at invokeGuardedCallback (http://dev-ai.poemhub.top/static/js/bundle.js:98674:35)
    at invokeGuardedCallbackAndCatchFirstError (http://dev-ai.poemhub.top/static/js/bundle.js:98688:29)
    at executeDispatch (http://dev-ai.poemhub.top/static/js/bundle.js:102832:7)
    at processDispatchQueueItemsInOrder (http://dev-ai.poemhub.top/static/js/bundle.js:102858:11)
    at processDispatchQueue (http://dev-ai.poemhub.top/static/js/bundle.js:102869:9)
    at dispatchEventsForPlugins (http://dev-ai.poemhub.top/static/js/bundle.js:102878:7)
openCity @ bundle.js:2764
onClick @ bundle.js:2793
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
(anonymous) @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26140
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
react-dom.development.js:4312 Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '.Login_tabcontent__+4DLD' is not a valid selector.
    at openCity (http://dev-ai.poemhub.top/static/js/bundle.js:2764:33)
    at onClick (http://dev-ai.poemhub.top/static/js/bundle.js:2793:13)
    at HTMLUnknownElement.callCallback (http://dev-ai.poemhub.top/static/js/bundle.js:98573:18)
    at Object.invokeGuardedCallbackDev (http://dev-ai.poemhub.top/static/js/bundle.js:98617:20)
    at invokeGuardedCallback (http://dev-ai.poemhub.top/static/js/bundle.js:98674:35)
    at invokeGuardedCallbackAndCatchFirstError (http://dev-ai.poemhub.top/static/js/bundle.js:98688:29)
    at executeDispatch (http://dev-ai.poemhub.top/static/js/bundle.js:102832:7)
    at processDispatchQueueItemsInOrder (http://dev-ai.poemhub.top/static/js/bundle.js:102858:11)
    at processDispatchQueue (http://dev-ai.poemhub.top/static/js/bundle.js:102869:9)

why could not get the element by class name with css module? Am I missing something? I checked the dom element and found the source like this:

<div id="Tokyo" class="Login_tabcontent__+4DLD"><h3>Tokyo</h3><p>Tokyo is the capital of Japan.</p></div>

when I tried to running the command in console, it look like this:

document.querySelectorAll('Login_tabcontent__+4DLD')
VM6827:1 Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': 'Login_tabcontent__+4DLD' is not a valid selector.
    at eval (eval at openCity (http://dev-ai.poemhub.top/static/js/bundle.js:2761:24), <anonymous>:1:10)
    at openCity (http://dev-ai.poemhub.top/static/js/bundle.js:2761:24)
    at onClick (http://dev-ai.poemhub.top/static/js/bundle.js:2786:13)
    at HTMLUnknownElement.callCallback (http://dev-ai.poemhub.top/static/js/bundle.js:98566:18)
    at Object.invokeGuardedCallbackDev (http://dev-ai.poemhub.top/static/js/bundle.js:98610:20)
    at invokeGuardedCallback (http://dev-ai.poemhub.top/static/js/bundle.js:98667:35)
    at invokeGuardedCallbackAndCatchFirstError (http://dev-ai.poemhub.top/static/js/bundle.js:98681:29)
    at executeDispatch (http://dev-ai.poemhub.top/static/js/bundle.js:102825:7)
    at processDispatchQueueItemsInOrder (http://dev-ai.poemhub.top/static/js/bundle.js:102851:11)
    at processDispatchQueue (http://dev-ai.poemhub.top/static/js/bundle.js:102862:9)

I tried to remove the + and did not throw error, seems the selector name must not contains +, but this css name is auto generated by css module.

Dolphin
  • 29,069
  • 61
  • 260
  • 539
  • If it's a CSS file, the class selector is going to be prefixed with a DOT already. That would mean you would have two DOTS which would be invalid syntax but please do basic debugging – Aluan Haddad Jul 13 '23 at 11:23
  • I tried to remove the dot but the issue keep the same. changed to 'Login_tabcontent__+4DLD' is not a valid selector, is it a dot issue? why removed the dot did not fixed it? – Dolphin Jul 13 '23 at 11:30
  • I was guessing based on what I saw. You don't provide enough information to diagnose the problem. You need to become familiar with basic debugging. Set breakpoints or log things to the console. Provide this information in the question so the people can help! – Aluan Haddad Jul 13 '23 at 11:31
  • But, looking over it again, `'.Login_tabcontent__+4DLD'` isn't a selector that the DOM will recognize – Aluan Haddad Jul 13 '23 at 11:32
  • I have pasted the dom output div element and found the class name exists. – Dolphin Jul 13 '23 at 11:35
  • Have you tried running the query selector in the console? – Aluan Haddad Jul 13 '23 at 11:36
  • the console still could not found, but it exists. I am confusing. – Dolphin Jul 13 '23 at 11:38
  • Query selector doesn't support all possible selectors. I don't remember offhand which ones aren't valid but jQuery supports way more for example. If you can't find it using the document query selector API from the root downward I don't know what to tell you. – Aluan Haddad Jul 13 '23 at 11:46
  • Please read https://stackoverflow.com/q/448981/125981 and perhaps the spec https://www.w3.org/TR/CSS/#csshttps://www.w3.org/TR/CSS/#css and change the class in the HTML to align with that `document.querySelectorAll('.Login_tabcontent__4DLD')` for example would be a valid (but IMHO terrible) class selector – Mark Schultheiss Jul 13 '23 at 11:59
  • it look like this css module auto generate name sometimes could not used by the querySelectorAll, I will learn to avoid this. @MarkSchultheiss I think it maybe the css module generate name issue. – Dolphin Jul 13 '23 at 12:01
  • @AluanHaddad _"Query selector doesn't support all possible selectors. I don't remember offhand which ones aren't valid but jQuery supports way more"_ - you got it kinda backwards there. `querySelector(All)` should support all the _CSS_ selectors the browser understands. That some frameworks like jQuery _add_ their own selectors, that are not specified in CSS, is a different matter. – CBroe Jul 13 '23 at 12:04
  • @CBroe I see. Thank you for clarifying. – Aluan Haddad Jul 13 '23 at 14:02

0 Answers0