CODEWITHSUNDEEP
javascriptreactjsjsxgetelementbyid
Allexj
Allexj

Reputation: 1487

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

        <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..

Upvotes: 1

Views: 615

Answers (2)

Velimir Tchatchevsky
Velimir Tchatchevsky

Reputation: 2825

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

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

Upvotes: 3

Sweet Chilly Philly
Sweet Chilly Philly

Reputation: 3219

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.

Upvotes: 1

Related Questions