How do I include text with the result in my innerHTML modal?

Question

I made a function that calculates the value received by an input and generates a result that should be shown in a modal, the modal appears with the title and the cute span, but the p with the result does not appear at all, currently the code is like this, but I’ve tried taking the div class "modal-content", the previous div which is the "modal", I also tried with innerText and innerContent and the same thing happened. I’m grateful if anyone can help, the code is just below.

HTML

 <div id="myModal" class="modal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2 class="modal-title">Sua conversão</h2>
                <p class="modal-text"></p>
            </div>
        </div>

        <div class="content">
            <div class="dolar-real">
                <div class="content-text">
                    <p>Dólar para real</p>
                    <img src="./assets/coin.png" alt="Dólar">
                </div>

                <div class="entrada">
                    <input type="text" id="dolarToReal">
                    <button id="btnDolarToReal" onclick="dolarParaReal()"><img src="./assets/Group.png" alt="Botão de conversao"></button>
                </div>
            </div>
        </div>

Javascript

function dolarParaReal() { //Função para calcular e mostrar o resultado
    var valor = document.getElementById('dolarToReal').value;
    var valorNumero = parseFloat(valor);

    var resultado = valorNumero * 5.71;
    var mostrarValor = `O valor convertido é: ${resultado}`;
    document.getElementsByClassName('modal-text').innerHTML = mostrarValor;  
    
    abrirModal();
}

function abrirModal() { //função para abrir o modal
    myModal.style.visibility = "visible";
}

var span = document.getElementsByClassName("close")[0]

span.onclick = function fecharModal() { //função para fechar o modal
    myModal.style.visibility = "hidden";
}

Answer 1

The function Document.getElementsByClassName returns a Array, as multiple elements may have the specified class.

Change of document.getElementsByClassName('modal-text').innerHTML for document.getElementsByClassName('modal-text')[0].innerHTML will work in your case.

Here’s a working example: https://jsfiddle.net/1bcaxgre/3/

However, I recommend not using classes to do this text assignment. If another element has the same class and is positioned higher up in the html structure, the code will change another element than the desired one. I suggest you change the getElementsByClassName for getElementById how to get the value of the element input.

Some interesting references:

• https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
• https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

Answer 2

Have you tried to remove Showvalue and put the result directly in the tag p? would look like this:

function dolarParaReal() { //Função para calcular e mostrar o resultado
    var valor = document.getElementById('dolarToReal').value;
    var valorNumero = parseFloat(valor);

    var resultado = valorNumero * 5.71;
    document.getElementsByClassName('modal-text').innerHTML = `O valor convertido é: ${resultado}`;

    abrirModal();
}

function abrirModal() { //função para abrir o modal
    myModal.style.visibility = "visible";
}

var span = document.getElementsByClassName("close")[0]

span.onclick = function fecharModal() { //função para fechar o modal
    myModal.style.visibility = "hidden";
}

 <div id="myModal" class="modal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2 class="modal-title">Sua conversão</h2>
                <p class="modal-text"></p>
            </div>
        </div>

        <div class="content">
            <div class="dolar-real">
                <div class="content-text">
                    <p>Dólar para real</p>
                    <img src="./assets/coin.png" alt="Dólar">
                </div>

                <div class="entrada">
                    <input type="text" id="dolarToReal">
                    <button id="btnDolarToReal" onclick="dolarParaReal()"><img src="./assets/Group.png" alt="Botão de conversao"></button>
                </div>
            </div>
        </div>