{"id":81,"date":"2023-08-11T17:15:40","date_gmt":"2023-08-11T20:15:40","guid":{"rendered":"https:\/\/urutaudev.com.br\/?p=81"},"modified":"2024-01-30T23:46:05","modified_gmt":"2024-01-31T02:46:05","slug":"como-manipular-valor-html-com-javascript","status":"publish","type":"post","link":"https:\/\/urutaudev.com.br\/index.php\/2023\/08\/11\/como-manipular-valor-html-com-javascript\/","title":{"rendered":"Como manipular valor Html com Javascript"},"content":{"rendered":"

Neste tutorial mostro como setar ou pegar valor de um elemento Html com Javascript<\/a>.<\/h2>\n
\n

Introdu\u00e7\u00e3o<\/h2>\n

Este ser\u00e1 um tutorial onde tentarei explicar de uma forma simples e pr\u00e1tica como podemos manipular o\u00a0 valor de um elemento Html utilizando o\u00a0 Javascript <\/a>.<\/span><\/p>\n

Conhecer est\u00e1 funcionalidade do Javascript<\/a> \u00e9 essencial para todo programador Frontend, pois s\u00f3 assim conseguiremos exibir as informa\u00e7\u00f5es para o usu\u00e1rio e obter os inputs do usu\u00e1rio em uma p\u00e1gina Html.<\/span><\/p>\n

Neste tutorial irei abordar tr\u00eas funcionalidades do Javascript<\/a> , irei mostrar como pegar um componente usando o m\u00e9todo (getElementById<\/code>).\u00a0<\/span><\/p>\n

Al\u00e9m de demonstrar como obter o valor de um elemento e como setar o valor para este elemento.<\/span><\/p>\n

 <\/p>\n

Como manipular valor Html com Javascript<\/h2>\n

Para setarmos o valor em um elemento Html, a primeira coisa que devemos fazer \u00e9 pegar a refer\u00eancia do elemento a qual queremos manipular, para isso utilizamos a fun\u00e7\u00e3o getElementById(idDoElemento)<\/b><\/code> e passando como par\u00e2metro o id do elemento.<\/span><\/p>\n

Ap\u00f3s defirnirmos a refer\u00eancia do elemento que queremos manipular, j\u00e1 podemos atribuir um valor a esse elemento. <\/span><\/p>\n

Neste primeiro exemplo vamos utilizar um elemento do tipo texto exemplo uma ((divs, labels, etc..)<\/b><\/code> para definir o valor destes elementos utilizamos o atributo textContent<\/b><\/code><\/span><\/p>\n

E para o segundo exemplo que \u00e9 um elemento do tipo (input<\/code>) usaremos o atributo\u00a0value<\/b><\/code> para definirmos o valor deste elemento.<\/span><\/p>\n

Logo abaixo demonstro um exemplo de como atribuir um valor para cada tipo elemento Html, que mencionei acima:<\/span><\/p>\n

## Seta valor em inputs\r\ndocument.getElementById(idItemValUnitario).value = 15;\r\n\r\n## Seta o valor em outros elementos html\r\ndocument.getElementById(idItemValTotal).textContent = \"15\";\r\n<\/code><\/span><\/pre>\n
 <\/p>\n
Como obter o valor de um elemento html<\/h2>\n
Para obtermos o valor de um elemento html como no exemplo acima devemos definir a refer\u00eancia do elemento que queremos manipular.<\/span><\/p>\n
No primeiro caso obteremos o valor de um elemento do tipo (input<\/code>)\u00a0 para obter o valor desse tipo de elemento devemos utilizar o atributo value<\/b><\/code> .<\/span><\/p>\n
E para os elementos do tipo (text<\/code>)\u00a0 como (divs, labels, etc..)<\/b><\/code> usaremos o atributo innerText<\/b><\/code> para pegar o valor destes elementos.<\/span><\/p>\n
Com base na explica\u00e7\u00e3o acima demonstro um exemplo de c\u00f3digo que podemos utilizar\u00a0 para obtermos o valor de um elemento Html:<\/span><\/p>\n
## Obt\u00e9m valor em inputs\r\nlet valor =  document.getElementById(idItemValUnitario).value;\r\n\r\n## Obt\u00e9m o valor de outros elementos html\r\nlet valor = document.getElementById(idItemValTotal).innerText;\r\n<\/code><\/span><\/pre>\n
 <\/p>\n
Refer\u00eancias:<\/h2>\n