concatenar dado inputado do usuário com função no js e parágrafo no html | JavaScript

Opa! Boa tarde, tudo bem?

Estou tentando puxar os dados inputados de um usuário no formulário pra poder responder pra ele no modal

por exemplo

O form pergunta: Quanto é 2+5?

O usuário responde: 7

O site abre o modal (que eu to fazendo em alert porque to trabalhando a lógica antes, e depois de pronto passo pro modal), dizendo: O resultado é: 7

Agora, o código em js é esse aqui


let btnNext = document.querySelector("#btn-next")

const getData = () => {
    let data1 = document.querySelector("#qtd-conversas-analisadas").value
    let data2 = document.querySelector("#empresa-analisada").value
    let data3 = document.querySelector("#date-picker").value
    let data4 = document.querySelector("#conversasParaCorrecao").value
    let data5 = document.querySelector("#errosCorrigidos").value
    let data6 = document.querySelector("#semRespostaNoBot").value
    let data7 = document.querySelector("#errosFluxo").value
    let data8 = document.querySelector("#melhorias").value
    let data9 = document.querySelector("#testesProd").value
    let data10 = document.querySelector("#chamadosSuporte").value
    let data11 = document.querySelector("#Obs").value

    return [data1, data2, data3, data4, data5, data6, data7, data8, data9, data10, data11]
}

const printData = () => {
    dados.forEach(dados => { 
        console.log(dados)
    });
}

const principal = () => {  //
    const dados = getData()

    return dados
}

 //serve pra chamar o botão
/* next.addEventListener("click", function (){ 
    alert(principal())
}) */


const modal = document.querySelector("#modal") // esse modal tem os resultados dos inputs

const next = document.querySelector("#btn-next") // é o botão que abre o modal

const span = document.querySelector(".close") // botão que vai fechar o modal



span.onclick = function () {
    modal.style.display = "none"
}

window.onclick = function (event) {
    if (event.target == modal){
        modal.style.display = "none"
    }
}

const conteudoModal = () =>{
    p1 + data1

    return conteudoModal
}

const getAnswer = () =>{
let p1 = document.querySelector("#p1").innerHTML
let p2 = document.querySelector("#p2").innerHTML
let p3 = document.querySelector("#p3").innerHTML
let p4 = document.querySelector("#p4").innerHTML
let p5 = document.querySelector("#p5").innerHTML
let p6 = document.querySelector("#p6").innerHTML
let p7 = document.querySelector("#p7").innerHTML
let p8 = document.querySelector("#p8").innerHTML
let p9 = document.querySelector("#p9").innerHTML
let p10 = document.querySelector("#p10").innerHTML
let p11 = document.querySelector("#p11").innerHTML

return [p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11]
}

const printAnswer = () =>{
    answer.forEach(answer =>{
        console.log(answer+printData)
    })
}

const result = () =>{
    const answer = getAnswer
    return answer
}


next.onclick = function () {
   alert.result()
}

Queria entender porque não estou conseguindo concatenar o parágrafo que eu puxei na lista de dados em getAnswer com o input do usuário em getData

Muchas Gracias!!

Oi Isa, tudo bem?

Desculpa a demora em retornar.

Pelo que entendi, você está tentando concatenar os dados inputados pelo usuário com os parágrafos que você puxou na lista de dados em getAnswer. Para fazer isso, você pode utilizar a função concat() do JavaScript, que une dois ou mais arrays.

Para começar, você precisa obter os dados inputados pelo usuário em getData e armazená-los em uma variável. Em seguida, você pode obter os parágrafos em getAnswer e também armazená-los em uma variável.

Agora, você pode concatenar essas duas variáveis usando a função concat(). Por exemplo:

const dados = getData(); // obter os dados inputados pelo usuário
const paragrafos = getAnswer(); // obter os parágrafos

const conteudoModal = paragrafos.concat(dados); // concatenar os parágrafos com os dados inputados

Nesse exemplo, a variável conteudoModal agora contém uma lista com todos os parágrafos seguidos dos dados inputados pelo usuário. Você pode usar essa variável para exibir o conteúdo no seu modal.

Além disso, notei que na sua função printAnswer, você está tentando imprimir a lista answer concatenada com a função printData. No entanto, a função printData não retorna nada, então essa concatenação não fará sentido. Se você quer imprimir os dados e as respostas no console, você pode fazer algo como:

const dados = getData(); // obter os dados inputados pelo usuário
const resposta = getAnswer(); // obter as respostas

console.log("Dados inputados pelo usuário:");
console.log(dados);

console.log("Respostas:");
console.log(resposta);

Isso irá imprimir os dados e as respostas separadamente no console.

Espero que isso te ajude a resolver o seu problema.

Um abraço e bons estudos.