HTMLElement focus() Methode Uncaught TypeError

Question

Ich bin auf ein Problem gestoßen, das ich ziemlich merkwürdig finde, obwohl ich noch Javascript lerne. Ich möchte einige Berechnungen nur durchführen, wenn ein Wert für einen Zustand gesetzt ist, wenn der Zustand nicht gesetzt ist, dann möchte ich das Formularfeld fokussieren.

Nun ist die Frage, dass der Code unten nicht

document.getElementById('cart-hplus').addEventListener('submit', estimateTotal); 

function estimateTotal(event) { 
    event.preventDefault(); 

    var state = document.getElementById('s-state').value; 
    if (state === '') { 
     alert("Please choose your preferred shipping state."); 

     state.focus(); 
    } 
} 

Uncaught TypeError: state.focus is not a function

funktioniert, aber das funktioniert, aber ich glaube nicht, dass eine Variable deklariert dann gute Gewohnheit ist wieder das Dokument-Objekt in meinem wenn Anweisung

function estimateTotal(event) { 
    event.preventDefault(); 

    var state = document.getElementById('s-state').value; 
    if (state === '') { 
     alert("Please choose your preferred shipping state."); 

     document.getElementById('s-state').focus(); 
    } 
} 

Was ist falsch mit dem ersten Code?

Answer 1

Sie unterscheiden nicht zwischen der Statuseingabesteuerung und dem Statuswert. Sie müssen 2 Variablen verwenden:

function estimateTotal(event) { 
    event.preventDefault(); 
    var state = document.getElementById('s-state'); 
    var stateValue = state.value; 
    if (stateValue === '') { 
     alert("Please choose your preferred shipping state."); 
     state.focus(); 
    } 
} 

Auch die Art, wie Sie es haben, ist in Ordnung. Es ist nichts falsch daran, das Objekt zweimal zu referenzieren.

Answer 2

In Ihrem ersten Code machen folgende Änderung,

document.getElementById('cart-hplus').addEventListener('submit', estimateTotal); 

function estimateTotal(event) { 
    event.preventDefault(); 

    var state = document.getElementById('s-state'); 
    if (state.value === '') { 
     alert("Please choose your preferred shipping state."); 

     state.focus(); 
    } 
}