Cum extrag valoarea unui input?

hitsasu · Mesajde **hitsasu** » Lun Aug 31, 2015 6:36 pm

Sunt absolut incepator in JavaScript, asa ca va rog sa aveti rabdare cu mine. In site-ul pe care incerc sa-l fac am introdus cateva linii de JS care nu functioneaza si nu stiu de ce. In principiu, este vorba despre valoarea unui camp text, adica, daca valoarea este x, campul text trebuie sa-si modifice proprietatile css. Daca in campul text este introdus cuvantul "cefalopodele" sau cuvantul "gasteropodele" bordura trebuie sa devina verde, daca nu, bordura trebuie sa devina rosie. Am mai intrebat pe altii, dar nimeni n-a stiut. Va rog din suflet, daca reusiti sa rezolvati problema, sa-mi explicati (ca la prost) unde si cum am gresit. Multumesc mult!
Codul il postez aici:
[code]<!DOCTYPE html>
<html>
<body>
<p style="text-indent:25px; font-size:20px; padding-right:30 px; padding-left:30px;"> Lamellibranhiatele, <input class="moluste" type="text"
name="gasteropode"> si <input class="moluste" type="text" name="gasteropode"> fac parte din increngatura Mollusca.</p>
<button type="button" class="btn btn-danger btn-block" name="evaluare" onclick='testA()'>VERIFICA-TE</button>
<hr>
<script>
function testA(){
var x = document.getElementsByClassName("moluste");
if (x.value =="cefalopodele" || x.value =="gasteropodele"){
x.style.border="1px solid green"}
else{
x.style.border="1px solid red"}
};
</script>
</body>
</html>[code]

nevvermind · Mesajde **nevvermind** » Lun Aug 31, 2015 8:29 pm

Pe cine ai intrebat de n-a stiut? Pare destul de simplu: dupa cum vezi, metoda getElementsByClassName o sa-ti aduca mai multe elemente, nu unul singur. Si cum tu ai doua elemente input cu aceeasi clasa, getElementsByClassName iti va returna 2. Ce vreau sa spun este ca x este un array, nu un obiect. Deci tre x[0].style (sau x[1].style pt celalalt element), nu x.style.

Fii atent la consola din Firebug (pe firefox) sau web tools (pe chrome) cand codezi in JS. Acolo o sa-ti apara erorile. Cand vei mai avea probleme, da eroarea aci. Eroare in cazul tau este "x.style is undefined".

PS: Foloseste-te de https://jsfiddle.net/ cand ceri ajutorul. Ne usurezi munca in a-ti reproduce eroarea mai rapid.

MarPlo · Mesajde **MarPlo** » Lun Aug 31, 2015 8:34 pm

Salut
Codul: document.getElementsByClassName("moluste") returneaza un Array cu elementele care au class="moluste".
Ori parcurgi array-ul cu o instructiune for():

Cod: Selectaţi tot

for(var i=0; i<x.length; i++){
  // se apica instructiuni la x[i] (fiecare element parcurs)
}

Sau, daca vrei sa preiei un singur element, adauga-i un ID si foloseste: document.getElementById('idul');

hitsasu · Mesajde **hitsasu** » Mar Sep 01, 2015 11:44 am

Va multumesc! Multumesc si pentru pontul cu consola!!!

hitsasu · Mesajde **hitsasu** » Mar Sep 08, 2015 1:17 am

Am incercat si cu Firebug si cu jsfiddle.net dar recunosc ca-s batut rau in cap si nu inteleg unde-mi arata erorile din script. Daca are cineva chef sa-mi explice mai detaliat cum pot afla ce greseli de JavaScript fac, ca ma chinui de cateva zile sa aflu si nu reusesc. Postez aici fisierul jsfiddle:
https://jsfiddle.net/#&togetherjs=KAxhF1Pp81

LXS · Mesajde **LXS** » Mie Noi 18, 2015 8:51 pm

In codul prezentat de tine ai gresit din start implementarea, pentru ca functia getElementsByClassName("moluste"), returneaza o colectie de obiecte (chiar daca ai doar un singur element de tip obiect in ea). Return-ul explicit este un obiect de tip HTMLCollection, care va contine primul input si cel de al doilea input (poti considera ca fiind asemanator unui array). Cand ai incercat in script x.value la ce valoare te asteptai? pentru sunt doua obiecte si ceri valoarea ambelor obiecte in acelasi timp, de fapt nu faci asta, nu se intampla nimic, pentru ca acest obiect HTMLCollection nu are un prototip secvential implementat pentru atributul/metoda value (aici pot oferi ca si contra-exemplu din Java interfata Iterator in care codul tau este functional, deoarece prin accesarea unei variabile la urmatoarea accesare va pointa catre elementul urmator), nu voi folosi in urmatorul exemplu un mecanism complex ci unul simplu si functional urmarind scriptul oferit de tine. Nativ poti accesa elementul ca si in cadrul unei liste element[index], daca nu iti place modul asta de selectie poti folosi o metoda implementata special accesarii al unui element din colectie in JavaScript folosind metoda user friendly item(index). Am corectat in cazul in care campurile sunt empty, sa nu se verifice termenii, si ca un tip as zice sa implementezi algoritmul distantei Levenstein dintre doua siruri pentru a accepta si siruri asemanatoare, poti de asemenea sa faci textul lowercase, in cazul in care un utilizator va scrie cu, capital letters, samd.

Codul tau devine astfel:
Script:

Cod: Selectaţi tot

<html>
<body>
<p style="text-indent:25px; font-size:20px; padding-right:30 px; padding-left:30px;"> Lamellibranhiatele, <input class="moluste" type="text"
name="gasteropode"> si <input class="moluste" type="text" name="gasteropode"> fac parte din increngatura Mollusca.</p>
<button type="button" class="btn btn-danger btn-block" name="evaluare">VERIFICA-TE</button>
<hr>
<script>
document.getElementsByName("evaluare").item(0).onclick = function(btn_evt)
{
    var termenAObiect = document.getElementsByClassName("moluste").item(0)
    var termenBObiect = document.getElementsByClassName("moluste").item(1)
    var termenAText = termenAObiect.value
    var termenBText = termenBObiect.value
    
    // Daca campurile celor doi termeni nu este empty
    if(termenAText != "")
    {
        // Campul nu este empty si campul contine termenul cefalopodele
        if (termenAText =="cefalopodele") termenAObiect.style.border="1px solid green"
        else termenAObiect.style.border="1px solid red"
    }
    else termenAObiect.style.border="1px solid black"
    if(termenBText != "")
    {
        // Campul nu este empty si campul contine termenul gasteropodele
        if (termenBText =="gasteropodele") termenBObiect.style.border="1px solid green"
        else termenBObiect.style.border="1px solid red"
    }
    else termenBObiect.style.border="1px solid black"
}
</script>
</body>
</html>

Cum extrag valoarea unui input?

Cum extrag valoarea unui input?

Re: Cum extrag valoarea unui input?

Re: Cum extrag valoarea unui input?

Re: Cum extrag valoarea unui input?

Re: Cum extrag valoarea unui input?

Re: Cum extrag valoarea unui input?

Cine este conectat