Why is the text inside the button not targeted?-CodePudding

Im just curious why the linethrough worked on everything even the textbox placeholders but not with the text inside all the buttons, with css or not. ``

function strike(){
  document.getElementById("root").style.textDecoration= "line-through";
  }
  function unstrike(){
    document.getElementById("root").style.textDecoration= null;
    }
function App() {
  return (
    <div className="container">
      
      <Form state={userIsRegistered} />
      <button onClick={strike}>strike</button>
      <button onClick={unstrike}>unstrike</button>
    </div>
  );
}

Even if i targeted the root. What should I do to include it when i click on the strike button?

CodePudding user response：

document.getElementById("root") //-> it get the root element of React

So if you set the style.textDecoration for this element, every things inside it changed. But the button with out a HTML Formatting Elements will not inherit this style.

function App() {
  const strike = () => {
    document.getElementById("root").style.textDecoration = "line-through";
  };
  const unstrike = () => {
    document.getElementById("root").style.textDecoration = null;
  };
  return (
    <div className="container">
      <Form state={userIsRegistered} />
      <button onClick={strike}>
        <p>strike</p>
      </button>
      <button onClick={unstrike}>
        <p>unstrike</p>
      </button>
    </div>
  );
}

CodePudding user response：

The text inside of a button does not inherit its outer elements properties. This applies to font also.

So, you need to set text decoration property to line through for button, separately