Why I can't set the text with getElementById().value?-CodePudding

        <div className="mb-3 form-check">
            <input type="checkbox" className="form-check-input" id="exampleCheck1" />
            <label className="form-check-label" htmlFor="exampleCheck1" id="suca">
            Accetto di vedere peni
            </label>
        </div>
        <button type="submit" className="btn btn-primary" onClick={(event)=>
{document.getElementById("suca").value="lol";
props.onVamo(document.getElementById("Username").value,document.getElementById("NumeroStanza").value,event)}}> 
                    Vamo
        </button>

Why document.getElementById("suca").value="lol"; why doesn't this actually set the text to "lol"? I don't get it..

CodePudding user response：

Besides "the react way" considerations, value is a valid atteibute for inputs/textareas, labels and other html elements have innerHTML

document.getElementById("blyat").innerHTML = "I have changed!";

CodePudding user response：

As Konrad mentioned its very dangerous to change your HTML in a reactive environment:

React.js: Set innerHTML vs dangerouslySetInnerHTML

You should set this elements value to a variable, and change the variable :)

I also suggest using dangerouslySetInnerHTML:

dangerouslySetInnerHTML is a property that you can use on HTML elements in a React application to programmatically set their content. Instead of using a selector to grab the HTML element, then setting its innerHTML, you can use this property directly on the element.