javascript Pegar dados de uma div e colocar como value de um input

[wellingtonmelo 8]

Olá pessoal, beleza?

 

Entendo bem de HTML, CSS, Bootstrap, mas funções dinâmicas que necessitam de Javascript, Jquary etc, eu não sei nada.

 

Consegui um script e estou testando, mas o resultado é exibido em uma DIV, e preciso que esse resultado seja exibido em um input, para que o programador possa pegar esse resultado e jogar no banco.

 

Olha o código:

<script type="text/javascript">
	function clicar() {
		var num1 = document.querySelector(".num1").value;
		var num2 = document.querySelector(".num2").value;
		var num3 = document.querySelector(".num3").value;
		var num4 = document.querySelector(".num4").value;
		    
		var resultado = parseInt(num1) - parseInt(num2) - parseInt(num3) - parseInt(num4);
		document.querySelector(".resultado").innerHTML = resultado;
	}	
</script>


<style type="text/css">
	.num1{ float: right; width: 70%}
	.num2{ float: right; width: 70%}
	.num3{ float: right; width: 70%}
	.num4{ float: right; width: 70%}
	.resultado{ float: right; width: 70%}
</style>


QNT. DISPONÍVEL:<input class="num1" type="number" value="12" disabled><br><br>

Tamanho 35/36:	<input class="num2" type="number"><br><br>

Tamanho 37/38:	<input class="num3" type="number"><br><br>

Tamanho 39/40:	<input class="num4" type="number"><br><br>

RESTAM:	<div class="resultado"></div>


<button onclick="clicar()">Resultado</button>

Está fazendo a subtração do total (12), e mostrando quanto que resta.

 

Porém, o meu amigo, outro piorque eu, programador meia boca que esta trabalhando comigo, disse que precisa que esse resultado apareça dentro de um input com disabled.

 

Vi alguns script que ensinam a exibir a div dentro de um input, porém não consegui replicar.

 

Preciso que o conteúdo da div:

<div class="resultado"></div>

 

Apareça dentro de um input, exemplo:

<input class="num4" type="text" value="   <div class="resultado"></div>    ">

 

Alguém pode me ajudar? Estou muito preocupado, estourou o prazo e apareceu isso para fazer por fora do projeto.

 

Abraço!!

Obrigado!!

 

OBS: Link onde estamos montando: http://spaflex.com.br/index.php?p=produto&amp;id=200043&amp;site=ad49f8e1bf4d27941b6051d14376304d4

[Williams Duarte 431]

Para atribuir valores a inputs é da mesma forma que pega.


Ao inves de innerHTML, use value

 

document.querySelector(".num1").value =  resultado;

 

[wellingtonmelo 8]

31 minutos atrás, Williams Duarte disse:

Para atribuir valores a inputs é da mesma forma que pega.


Ao inves de innerHTML, use value

 

document.querySelector(".num1").value =  resultado;

 

 

Muito obrigado por sua dica Williams!

 

Eu realmente sou leigo quando se trata de javascript, por gentileza você poderia me dizer como usar o

document.querySelector(".num1").value =  resultado;

dentro do meu código? como montar o input para exibir o resultado dentro do value?

 

Obrigado demais por sua ajuda!

[Williams Duarte 431]

8 horas atrás, wellingtonmelo disse:

<script type="text/javascript">

function clicar() {

  var num1 = document.querySelector(".num1").value;

  var num2 = document.querySelector(".num2").value;
  var num3 = document.querySelector(".num3").value; 
  var num4 = document.querySelector(".num4").value; 
  var resultado = parseInt(num1) - parseInt(num2) - parseInt(num3) - parseInt(num4);         document.querySelector(".resultado").value = resultado;
} 

</script>

A unica coisa que muda é de 

innerHTML 

para 

value

O restante continua igual!

[wellingtonmelo 8]

Alterei só o value, mas não funcionou, visualmente não alterou nada, porém o resultado não é mais exibido ao clicar no botão.

 

Estou testando fazendo aqui: http://spaflex.com.br/index.php?p=produto&amp;id=200043&amp;site=ad49f8e1bf4d27941b6051d14376304d4

 

Um detalhe, no meu dominio funciona, pode testar clicando ai, mas quando coloco no jsfiddle.net não funciona, olha por favor: http://jsfiddle.net/wellingtonmelo/dwbz4x5s/9/

No jsfiddle esta do jeito que esta exibindo no site agora, sem o .value.

 

Tentei usar:

<input type="text" class="resultado">

mas não funcionou! Preciso muito desse resultado dentro do input.

 

Obrigado por sua ajuda amigo, abraço!

[Williams Duarte 431]

Aqui no Browser Funciona

Mas como se trata de um Ecommerce, use Jquery

No jsfiddle

 

$(function() {

        
        $("button").click(function() {

            var num1 = $(".num1").val();
            var num2 = $(".num2").val();
            var num3 = $(".num3").val();
            var num4 = $(".num4").val();
                
            var resultado = parseInt(num1) - parseInt(num2) - parseInt(num3) - parseInt(num4);
            
            $(".num1").val(resultado);

        });

    });

 

<style type="text/css">
	.num1{ float: right; width: 70%}
	.num2{ float: right; width: 70%}
	.num3{ float: right; width: 70%}
	.num4{ float: right; width: 70%}
	.resultado{ float: right; width: 70%}
</style>


QNT. DISPONÍVEL:<input class="num1" type="number" value="12" disabled><br><br>

Tamanho 35/36:	<input class="num2" type="number"><br><br>

Tamanho 37/38:	<input class="num3" type="number"><br><br>

Tamanho 39/40:	<input class="num4" type="number"><br><br>

RESTAM:	<div class="resultado"></div>


<button>Resultado</button>



<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>


<script>	

	$(function() {

		
		$("button").click(function() {

			var num1 = $(".num1").val();
			var num2 = $(".num2").val();
			var num3 = $(".num3").val();
			var num4 = $(".num4").val();
			    
			var resultado = parseInt(num1) - parseInt(num2) - parseInt(num3) - parseInt(num4);
			
			$(".num1").val(resultado);

		});

	});

</script>

 

 

 

[Williams Duarte 431]

Forma de uso


 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style type="text/css">
	.num1{ float: right; width: 70%}
	.num2{ float: right; width: 70%}
	.num3{ float: right; width: 70%}
	.num4{ float: right; width: 70%}
	.resultado{ float: right; width: 70%}
	</style>



</head>
<body>

	QNT. DISPONÍVEL:<input class="num1" type="number" value="12" disabled><br><br>

Tamanho 35/36:	<input class="num2" type="number"><br><br>

Tamanho 37/38:	<input class="num3" type="number"><br><br>

Tamanho 39/40:	<input class="num4" type="number"><br><br>

RESTAM:	<div class="resultado"></div>


<button>Resultado</button>


	

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script>	

	$(function() {

		
		$("button").click(function() {

			var num1 = $(".num1").val();
			var num2 = $(".num2").val();
			var num3 = $(".num3").val();
			var num4 = $(".num4").val();
			    
			var resultado = parseInt(num1) - parseInt(num2) - parseInt(num3) - parseInt(num4);
			
			$(".num1").val(resultado);
			$(".resultado").text(resultado);
		 	

		});

	});

</script>
	
</body>
</html>

 

[wellingtonmelo 8]

OPA!!!!!

Que maravilha meu amigo, se todos os profissionais você iguais a você, nossa internet seria mais linda! hahaha

 

Funcionou perfeito, tem um ajuste que precisa fazer, que é com relação ao número multiplicar dentro do input class="num1"

 

Se colocar exemplo: 

Tamanho 35/36: 3

Tamanho 37/38: 3

Tamanho 39/40: 3

E clicar no resultado, exibi 9. (faltam 3 pra completar 12 pares.)

 

dai o usuário automaticamente entende que precisa completar com + 3 pares, para fechar os 12 pedidos, entende?

 

Se clicar acrescentar + 3 a qualquer campo exemplo:

Tamanho 35/36: 6

Tamanho 37/38: 3

Tamanho 39/40: 3

E clicar no resultado, o sistema mostra: -9, ou seja, ele passa direto, ne?

 

Precisa mostrar 0, ao invés do -9, ai sim o pedido fica certinho para clicar em "Adicionar ao Carrinho".

 

Consegue me ajudar com mais isso?

 

O HTML eu monto todo, mas as funções dinâmicas me quebram!

 

Olha como ficou: http://spaflex.com.br/index.php?p=produto&amp;id=200043&amp;site=ad49f8e1bf4d27941b6051d14376304d4

 

Obrigado!!!!

 

[Williams Duarte 431]

Simples, use uma condição ternaria!

 

resultado = resultado < 0 ? 0 : resultado;

Estou saindo de Viagem, boa sorte na empreitada!

 

<script>	

	$(function() {

		
		$("button").click(function() {

			var num1 = $(".num1").val();
			var num2 = $(".num2").val();
			var num3 = $(".num3").val();
			var num4 = $(".num4").val();
			    
			var  resultado = num1 - num2 - num3 - num4;

			resultado = resultado < 0 ? 0 : resultado;
			
			$(".num1").val(resultado);
			$(".resultado").text(resultado);
		 	

		});

	});

</script>

 

[wellingtonmelo 8]

1 hora atrás, Williams Duarte disse:

Simples, use uma condição ternaria!

 

resultado = resultado < 0 ? 0 : resultado;

Estou saindo de Viagem, boa sorte na empreitada!

 

<script>	

	$(function() {

		
		$("button").click(function() {

			var num1 = $(".num1").val();
			var num2 = $(".num2").val();
			var num3 = $(".num3").val();
			var num4 = $(".num4").val();
			    
			var  resultado = num1 - num2 - num3 - num4;

			resultado = resultado < 0 ? 0 : resultado;
			
			$(".num1").val(resultado);
			$(".resultado").text(resultado);
		 	

		});

	});

</script>

 

 

Muito obrigado amigo, você foi de extrema ajuda, conseguiu tirar um peso da minha cabeça, pensei que não iria conseguir entregar isso. Agora falta muito pouco! Gratidão, boas férias ai, obrigado!

 

Agora falta pouco para finalizar essa função, se alguém poder me ajudar a finaliza-la, serei muito grato!!

 

aqui está o código de como ficou: https://jsfiddle.net/wellingtonmelo/8qkv2tzg/1/

 

Bom, nosso amigo Williams deixou tudo prontinho.

Precisamos agora apenas fazer algum ajuste para não ZERAR o .num1

Quando a soma não é igual a 12, ele exibe o restante, porém ao adicionar a quantidade para somar o total de 12, trava.

 

O ideal é que ao adicionar o valor que somado der o total de 12, a função apenas some o complemento.

 

Exemplo, se o usuário digitar:

Tamanho 35/36: 3

Tamanho 37/38: 3

Tamanho 39/40: 3

 

Vai restar 3.

 

Se o usuário digitar 6 em um dos inputs, a função apenas precisa somar 6 + 3 ao invés de resetar.

 

Algum outro ninja me ajuda ai, por favor!!!!

Obrigado!!!