Como utilizo javaScript com HTML Inputs?

ton. · Julho 28, 2009

Boa tarde,

preciso de uma ajuda com este código...

estou apredendo a usar XHTML, CSS, JavaScript, etc, e estou perdidaço^^

Eu gostaria de saber como faço pra obter dados de uma textbox como parametros de uma função em JS e como passar a saída desta função para uma label...

segue o código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Simulador para Magos</title>
    <link rel="stylesheet" type="text/css" href="StyleSheet.css" />
    <script type="text/javascript">
        function CalculaDano(magica,amp,dc,tc,da)
        {
            return (magica*amp+da)*(1+tc*dc);
        }
    </script>
</head>
<body>
    <h1>Simulador de Dano para Magos</h1>
    <form id="MainForm" action="StyleSheet.css">
     <div class="campos">
        <label class="formlbl" id="lblMagica">Mágica: </label>    
        <input class="formtxt" id="txtMagica" title="Mágica" type="text" /><br />
        <label class="formlbl" id="Label1">Ampliação: </label>
        <input class="formtxt" id="txtAmp" type="text" /><br />
        <label class="formlbl" id="Label2">Danos Críticos: </label>
        <input class="formtxt" id="txtDC" type="text" /><br />
        <label class="formlbl" id="Label3">Taxa Crítica: </label>
        <input class="formtxt" id="txtTC" type="text" /><br />
        <label class="formlbl" id="Label4">Dano Adicional: </label>
        <input class="formtxt" id="txtDanoAdd" type="text" />
     </div>
     <div class="resultado">
        <label class="formlbl" id="Resultadolbl1">Dano Médio: </label>
        <label class="formlbl" id="Resultadolbl2" onkeypress="return CalculaDano(???????????????)">CalculaDano(???????????????)<label>
     </div>
    </form>
</body>
</html>

CSS:

body 
{
	background:#2F4F4F
}
h1
{
	font-family:Calibri;
	color:White;
	font-size:larger;
	font-weight:bold;
}

.campos
{
	text-align:right;
	font-family:Calibri;
	color:Aqua;
	font-size:small;
	width:200px
}
.resultado
{
	font-size:large;
	font-family:Calibri;
	color:Aqua;
}	

.formlbl
{
	font-weight:bold;
}

.formtxt
{
	height:auto;
	width: 60px;
	background-color:#2F4F4F;
	border-color:Aqua;
}

Qualquer dica de como melhorar, tanto em JS, como XHTML, como CSS é muito bem-vinda!

Otata · Julho 28, 2009

então para você pegar o valor de um text

document.getElementById('lblMagica').value

para jogar um html text em um label ou qualquer campo

document.getElementById('label').innerHTML = 'oiaoia';

os elementos tem varias propriedades..

da uma olhada

http://www.w3schools.com/htmldom/dom_intro.asp

vai te ajudar...

t+

RobertoPC · Julho 30, 2009

Fala,

Para pegar o valor do input utilize o seguinte script:


   // Uma coisa que não tem no seu input, que você deve colocar é o atributo "name" da seguinte maneira

   <input class="formtxt" id="txtMagica" title="Mágica" type="text" name="txtMagica"/>

   // fazendo isso utilize o seguinte código para pegar o valor

   var inptxtMagica = document.MainForm.txtMagica.value;

Você pode pegar o valor com os seguintes eventos: onchange, onfocus e onsubmit. Para chamar a função que trata os valores.

É bom você acessar o site que foi passado anteriormente, para se aprofundar mais nos objetos html, comandos javascript, eventos e outros.

Em relação ao seu código você colocou algo errado. oO


    // O action não pode redirecionar para um arquivo CSS, pois ele não tem como tratar dados de formulário
    <form id="MainForm" action="StyleSheet.css">

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Vlw

ton. · Julho 30, 2009

pocha, vle mesmo pessoal ;D

eu li o site e me ajudou muito, mas fiquei com uma duvida de sintaxe...

no código eu estou usando somente o nome_do_campo.value ou nome_do_campo.innerHTML e está funcionando no IE8 normalmente, porém o roberto disse que eu deveria utilizar: document.MainForm.txtMagica.value;

o que esse document.mainform. fazem? em outros browsers eles são necessários?

e agora outro problema^^

eu gostaria de fazer um tabela dinâmica com HTML e javascript.

Em uma tabela com número de linhas fixo, gostaria q a cada click em um botao outra coluna fosse adicionada ...

Aqui segue a minha tentativa sem sucesso:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Simulador para Magos</title>
    <link rel="stylesheet" type="text/css" href="StyleSheet.css" />
</head>
<body>
    <script type="text/javascript">
        function CalculaDano (magica,amp,dc,tc,da, resultado)
        {
            _magica = magica.value;
            _amp = amp.value;
            _dc = dc.value;
            _tc = tc.value;
            _da = da.value;
            _resultado = (_magica * _amp + _da)*(1 + _tc * _dc);
            resultado.innerHTML = _resultado;
        }
        
        function AdicionaDados()
        {
            Ma = liMA.value;
            Amp = liAmp.value;
            DC = liDC.value;
            TC = liTC.value;
            DA = liDA.value;
            DM = liDM.value;
            liMa.innerHTML = Ma + '<td>' + txtMagica.value + '</td>';
            liAmp.innerHTML = Amp + '<td>' + txtAmp.value + '</td>';
            liDC.innerHTML = DC + '<td>' + txtDC.value + '</td>';
            liTC.innerHTML = TC + '<td>' + txtTC.value + '</td>';
            liDA.innerHTML = DA + '<td>' + txtDanoAdd.value + '</td>';
            liDM.innerHTML = DM + '<td>' + Resultadolbl2.value + '</td>';
        }
        
    </script>
    <h1>Simulador de Danos</h1>
    <form id="MainForm" action="HTMLPage.htm" onkeypress="CalculaDano (txtMagica, txtAmp, txtDC, txtTC, txtDanoAdd, Resultadolbl2)" >
     <div class="dados">
         <div class="campos">
            <label class="formlbl" id="lblMagica">Mágica: </label>    
            <input class="formtxt" id="txtMagica" title="Mágica" type="text" /><br />
            <label class="formlbl" id="Label1">Ampliação(%): </label>
            <input class="formtxt" id="txtAmp" type="text" /><br />
            <label class="formlbl" id="Label2">Danos Críticos(%): </label>
            <input class="formtxt" id="txtDC" type="text" /><br />
            <label class="formlbl" id="Label3">Taxa Crítica(%): </label>
            <input class="formtxt" id="txtTC" type="text" /><br />
            <label class="formlbl" id="Label4">Dano Adicional: </label>
            <input class="formtxt" id="txtDanoAdd" type="text" />
         </div>
         <div class="resultado">
            <label class="formlbl" id="Resultadolbl1">Dano Médio: </label>
            <label class="formlbl" id="Resultadolbl2" ></label>
         </div>
         <input id="btnSave" type="button" value="Add!" title="Adicione os dados!" class="btn" onclick="AdicionaDados()" />
     </div>
     <div class="tabela">
     <table>
         <tr id="liMa">
             <th>Mágica</th>
         </tr>
         <tr id="liAmp">
             <th>Ampliação</th>
         </tr>
         <tr id="liDC">
             <th>Danos Críticos</th>
         </tr>
         <tr id="liTC">
             <th>Taxa Crítica</th>
         </tr>
         <tr id="liDA">
             <th>Dano Adicional</th>
         </tr>
         <tr id="liDM">
             <th>Dano Médio</th>
         </tr>             
     </table>        
     </div>
    </form>
</body>
</html>

RobertoPC · Julho 30, 2009

Fala,

Em relação ao MainForm que eu citei, eu tive um pequeno engano, que é em relação ao id do form. No caso para você colocar document.mainform.txtmagica.value, você deve definir o name do form como 'mainform':

-> <form name="MainForm" action="HTMLPage.htm">

utilize -> document.mainform.txtmagica.value;

Caso utilize como id utilize:

-> <form id="MainForm" action="HTMLPage.htm">

utilize -> document.getElementById('mainform').txtmagica.value;

E no caso do evento não utilize onkeypress, utilize onsubmit e os parâmetros passados na chamada da função está de forma incorreta, utilze da seguinte maneira:

E para pegar o valor dos campos na função utilize:

document.mainform.nomedocampo.value;

Em relação a tabela, esquece isso rapaz, procure saber mais sobre divs.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Vlw

ton. · Julho 30, 2009

cara, esse get elemnt by ID não funcionouo...

só o ID do o0bjeto ta funcionando melhor ;D

mas acho q vcs não entenderam a duvida...

eu gostaria que a cada click de um botão fosse adicionada uma coluna em uma tabela:

se o código que não funciona -.-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
</head>
<body>
    <script type="text/javascript">
    function AdicionaDados()
        {
            Ma = liMA.value;
            Amp = liAmp.value;
            DC = liDC.value;
            TC = liTC.value;
            DA = liDA.value;
            DM = liDM.value;
            liMa.innerHTML = Ma + '<td>' + 'teste' + '</td>';
            liAmp.innerHTML = Amp + '<td>' + 'teste' + '</td>';
            liDC.innerHTML = DC + '<td>' + 'teste' + '</td>';
            liTC.innerHTML = TC + '<td>' + 'teste' + '</td>';
            liDA.innerHTML = DA + '<td>' + 'teste' + '</td>';
            liDM.innerHTML = DM + '<td>' + 'teste' + '</td>';
        }
    </script>
    <form id="MainForm" action="HTMLPage3.htm" >
    <div class="tabela">
     <table>
         <tr id="liMa">
             <th>Mágica</th>
         </tr>
         <tr id="liAmp">
             <th>Ampliação</th>
         </tr>
         <tr id="liDC">
             <th>Danos Críticos</th>
         </tr>
         <tr id="liTC">
             <th>Taxa Crítica</th>
         </tr>
         <tr id="liDA">
             <th>Dano Adicional</th>
         </tr>
         <tr id="liDM">
             <th>Dano Médio</th>
         </tr>             
     </table>        
     </div>
     <input id="btnSave" type="button" value="Add!" title="Adicione os dados!" class="btn" onclick="javascript: AdicionaDados()" />
     </form>
</body>
</html>

klonder · Julho 30, 2009

eu gostaria que a cada click de um botão fosse adicionada uma coluna em uma tabela

Você gostaria de inserir outra coluna, semelhante à primeira que já está criada (e contém 6 linhas), ou uma nova "linha", abaixo dessas que já estão sendo exibidas?

Se for outra "linha", ela ficará vazia realmente? Pergunto isso para direcionarmos melhor a sua intenção.

Como você não mencionou sobre o conteúdo da coluna ou linha, existem muitas possibilidades para criar um código que atenda às suas necessidades e diversas maneiras de estruturar os algoritmos... muito amplo!

ton. · Julho 31, 2009

Verdade^^

Bom, há 6 linhas na tabela, ela continuará com 6 linhas sempre, porém a cada click no botão será adicionado uma coluna e cada campo dessa nova coluna receberá o valor de uma textBox, sendo que o último campo receberá o valor da lblResultado2 ao invés de uma textBox.

Em suma, é uma calculadora, onde você pode gravar os resultados que desejar na tabela

:D

PS: O objetivo é eu conhecer JavaScript, então, qualquer sugestão que seja em JS será ótima, porém, soluções que usem linguagem de alto nível como Java, C# não são interessantes no momento.

ton. · Julho 31, 2009

Eu gostaria de saber pq esse código não funciona no FF, mas funciona no IE >.<

Mais especificamente, o método OnKeyUp do MainForm^^

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Simulador para Magos</title>
    <style type="text/css">
        body 
        {
		        font-family:MS Sans Serif;
                background: #00FFFF;
                color:#778899;
        }
        h1
        {
                font-size:larger;
                font-weight:bold;
        }

        .campos
        {
                text-align:right;
                font-size:small;
                width:230px;
        }
        .resultado
        {
            font-size:medium;
	        font-weight:900;
	        color:#00FFFF;
	        background-color: #778899;
            text-align:left;
        }

        .dados
        {
            width:250px;
	        position:relative;
	        text-align:center;
	        float:left;
        }

        .tabela
        {
	        width: 600px;
	        font-size:small;
	        text-align:left;
        }

        .tbl1
        {
	        background-color:#ADD8E6;
	        text-align:center;
	        font-weight:bold;
        }

        .tbl2
        {
	        text-align:center;
	        font-weight:100;
	        color:#00FFFF;
	        background-color: #778899;
        }


        .btn
        {
            background: cyan;
	        font-size:samll;
        }

        .formlbl
        {
                font-weight:bold;
        }

        .formtxt
        {
                height:auto;
                width: 60px;
        }
        
        .hist
        {
            
        }
    </style>
</head>
<body>

    <script type="text/javascript">
        function CalculaDano (magica,amp,dc,tc,da, resultado)
        {
            vma = magica.value;
            vam =(1*1 + amp.value/100);
            vdc = dc.value/100;
            vtc = tc.value/100;
            vda = da.value;
            vresultado = ((vma * vam) + 1*vda)*(1 + (vtc * vdc));
            resultado.innerHTML = Math.round(vresultado);
        }
        
        function AdicionaDados()
        {

            var Ma = document.getElementById('liMa').insertCell(1);
            var Amp = document.getElementById('liAmp').insertCell(1);
            var DC = document.getElementById('liDC').insertCell(1);
            var TC = document.getElementById('liTC').insertCell(1);
            var DA = document.getElementById('liDA').insertCell(1);
            var DM = document.getElementById('liDM').insertCell(1);
            
            
            Ma.innerHTML= document.getElementById('txtMagica').value;
            Amp.innerHTML= document.getElementById('txtAmp').value;
            DC.innerHTML= document.getElementById('txtDC').value;
            TC.innerHTML= document.getElementById('txtTC').value;
            DA.innerHTML= document.getElementById('txtDanoAdd').value;
            DM.innerHTML= document.getElementById('Resultadolbl2').innerHTML;
        }
        
    </script>

    <h1>
        Simulador de Danos</h1>
    <form id="MainForm" action="HTMLPage.htm" onkeyup="javascript: CalculaDano (txtMagica, txtAmp, txtDC, txtTC, txtDanoAdd, Resultadolbl2)">
        <div class="dados">
            <div class="campos">
                <label class="formlbl" id="lblMagica">
                    Mágica:
                </label>
                <input class="formtxt" id="txtMagica" title="Mágica" type="text" /><br />
                <label class="formlbl" id="Label1">
                    Ampliação(%):
                </label>
                <input class="formtxt" id="txtAmp" title="Ampliação" type="text" /><br />
                <label class="formlbl" id="Label2">
                    Danos Críticos(%):
                </label>
                <input class="formtxt" id="txtDC" title="Danos Críticos" type="text" /><br />
                <label class="formlbl" id="Label3">
                    Taxa Crítica(%):
                </label>
                <input class="formtxt" id="txtTC" title="Taxa Crítica" type="text" /><br />
                <label class="formlbl" id="Label4">
                    Dano Adicional:
                </label>
                <input class="formtxt" id="txtDanoAdd" title="Dano Adicional" type="text" />
            </div>
            <div class="resultado">
                 <label id="Resultadolbl1">
                    Dano Médio:
                </label>
                <label id="Resultadolbl2">
                </label>
            </div>
        </div>
        <div class="tabela">
            <div>
                <table id="hist">
                    <tr id="liMa" class="tbl1" style="text-align: right">
                        <th>
                            Mágica</th>
                    </tr>
                    <tr id="liAmp" class="tbl1" style="text-align: right">
                        <th>
                            Ampliação</th>
                    </tr>
                    <tr id="liDC" class="tbl1" style="text-align: right">
                        <th>
                            Danos Críticos</th>
                    </tr>
                    <tr id="liTC" class="tbl1" style="text-align: right">
                        <th>
                            Taxa Crítica</th>
                    </tr>
                    <tr id="liDA" class="tbl1" style="text-align: right">
                        <th style="height: 21px">
                            Dano Adicional</th>
                    </tr>
                    <tr id="liDM" class="resultado" style="text-align: right">
                        <th>
                            Dano Médio</th>
                    </tr>
                    <tr>
                        <th>
                            <input id="btnSave" type="button" value="Add!" title="Adicione os dados!" class="btn"
                                onclick="javascript: AdicionaDados()" /></th>
                    </tr>
                </table>
            </div>
        </div>
    </form>
</body>
</html>

Arquivado

Como utilizo javaScript com HTML Inputs?

Recommended Posts

ton. 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Otata 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

RobertoPC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

ton. 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

RobertoPC 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

ton. 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

ton. 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

ton. 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante