Alguém pode me ajudar , eu criei uma DIV pelo JavaScript com createElement , coloquei um tamanho e uma cor para testar e funcionou certinho , consigo colocar texto , botão , porém aí vem minha dúvida , eu queria pegar o resultado de um document.write e colocar dentro desta DIV que criei pelo próprio JavaScript, alguém poderia me ajudar como fazer. Muito obrigado
3
respostas
respostas
inserir JavaScript dentro de uma DIV
Fala, Daniel! Tudo bom contigo?
Vou pedir para que poste seu código aqui para poder te ajudar da melhor forma, pode ser?
Ficamos no aguardo!!!
Tudo bem Cássio , desculpa a demora, na verdade o código é um teste só, mas eu criei em JavaScript uma DIV e adicionei uma botão e um texto nela pelo javascript, mas eu queria adicionar dentro desta DIV o resultado de um document.write, então minha duvida é se seria possível adicionar e como faço , caso não seja possível qual a melhor forma de fazer.
O objetivo é fazer um exercício de tabuada onde é informado qual a tabuada, na hora que clica no botão ele apaga essa tela e entra em uma nova com o resultado da tabuada 10 x 0 = 0 e assim por diante, porem o resultado esta no document.write que quero colocar dentro dessa DIV que foi criada.
Não sei se consegui explicar , mas qualquer duvida só me mandar, muito obrigado.
var element = document.createElement("div");
element.style.height = "500px";
element.style.width = "500px";
element.style.backgroundColor = "red";
element.style.position = "absolute";
element.style.left = "200px";
element.innerHTML = "<h1>HELLO WORLD</h1>";
document.body.appendChild(element);
var botao = document.createElement("button");
botao.textContent = "novo botao";
element.appendChild(botao);
Oi, Daniel, tudo bem?
Eu tentei reproduzir o problema mas de outra forma, de uma forma menos verbosa, mais semâtica e com o auxílio do css. Aqui vai o código:
<!doctype html>
<html lang="pt-br">
<head>
<title>Tabuada</title>
<meta charset="utf-8" />
</head>
<body>
<style>
body{
text-align:left;
background-color: lightcyan;
}
#container{
text-align:left;
}
</style>
<h1>Div com Tabuada </h1>
<form>
<div>
<p>Qual tabuada deseja saber? </p>
<input type="text" name="numero" id="number" required />
<button type="button" onclick="tabuada();">Calcular</button>
</div>
<div id="container"></div>
</form>
<script>
function tabuada(){
let number = parseInt(document.getElementById("number").value);
document.getElementById("container").innerHTML = "";
for (let i = 0; i < 11; i++ ) {
document.getElementById("container").innerHTML += number + " x " + i + " = " + (number * i)+"<br />";
}
}
</script>
</body>
</html>Nesse código, que está em um arquivo html, utilizamos o html, css e js, mas tudo em conjunto e cada um fazendo o seu papel. Vamos ao código:
Esse trecho ele é o coração da execução, porque é onde recebemos o valor que o usuário informa e onde evento de click do botão aciona a função tabuada onde está o cálculo. E logo depois temos, a div que irá conter o resultado do operação feita. A tag input ela é extremamente poderesa, veja que quando estabeleço os seus types eu direciono o meu input para receber um determinado tipo de valor do meu usuário: texto, data, email, número de telefone...
<form>
<div>
<p>Qual tabuada deseja saber? </p>
<input type="text" name="numero" id="number" required />
<button type="button" onclick="tabuada();">Calcular</button>
</div>
<div id="container"></div>
</form>Aqui é onde ele recebe o valor dado pelo usuário: <input type="text" name="numero" id="number" required />
E aqui <button type="button" onclick="tabuada();">Calcular</button> équando o botão é clicado e chama a function tabuada
A segunda parte mais importante do nosso código é a função tabuada que manipula a <div id="container"></div> que irá receber o cálculo. Vamos a ele:
function tabuada(){
let number = parseInt(document.getElementById("number").value);
document.getElementById("container").innerHTML = "";
for (let i = 0; i < 11; i++ ) {
document.getElementById("container").innerHTML += number + " x " + i + " = " + (number * i)+"<br />";
}
}Na primeira linha criamos a variável number para pegar o valor da id number, ou seja, o valor que foi digitado pelo usário é onde ficará alocada.
Já aqui document.getElementById("container").innerHTML = ""; eu capturo a id da nossa div container e adiciono um espaço vazio nela que será preenchido posteriormente com o cálculo.
for (let i = 0; i < 11; i++ ) {
document.getElementById("container").innerHTML += number + " x " + i + " = " + (number * i)+"<br />";
}Nesse trecho acima, temos o cálculo em si que fará a nossa tabuada acontecer. O for é o nosso loop que irá girar 10 vezes (regra da tabuada) e incrementar o valor do multiplicador (indíce i*), ou seja, a cada volta do loop enquanto for menor 11, a variável *i passa de 1, na segunda volta é 2 e assim por diante. E finalmente, document.getElementById("container").innerHTML += number + " x " + i + " = " + (number * i)+"<br />"; nessa linha nós imprmimos o cálculo dentro da div container.
Para finalizar, tem alguns estilos dentro da tag style para tag body e para o div container:
<style>
body{
text-align:left;
background-color: lightcyan;
}
#container{
text-align:left;
}
</style>Talvez não tenha conseguido explicar tão bem e não sei se é o que deseja. Mas analise o código com calma, mexa nele, debbugue ele para compreender melhor o funcionamento. E se ficou qualquer dúvida é só falar :}
Esperamos ter te ajudado!