Javascript - Abrufen des ersten Zeichens meiner Zeichenfolge - Fehler

Question

können Sie mir sagen, warum die Konsole sagt, dass es keine Funktion ist?

var firstAuthorName = document.getElementById("firstAuthorName"); 

var firstCharacter = console.log(firstAuthorName.slice(0,1));  

dann bekomme ich den Text durch das:

div.innerHTML += firstCharacter.value + ", " + firstAuthorInitials.value + ", " + firstAuthorSurname.value + ". ";  

So ist die Konsole sagt: "Nicht abgefangene Typeerror: firstAuthorName.slice ist keine Funktion"

Answer 1

Sie müssen die Inhalte zugreifen des HTML-Elements und erhalten das erste Zeichen davon. Sie versuchen, den ersten Buchstaben aus dem HTML-DOM-Objekt selbst zu erhalten, nicht den Inhalt des Objekts.

There are 3 standard ways to extract content of an element and which you use depends on the kind of element you have and the kind of content it contains:

1a. value: Wenn das Element ein Formularfeld ist (Optionsfeld, Kontrollkästchen, Textfeld, usw.) value wird immer verwendet, um den Wert im Formularfeld zu erhalten.

1b. value wird auch zu erhalten, um den Wert eines HTML-Elements des Attributs wie in verwendet:

var src = document.querySelector("img").attributes[0].value; 
 
console.log("The value of the \"src\" attribute of the image is: " + src);

<img src="images/someImage.jpg">

Für Nicht-Formularfeldelemente, Sie textContent oder innerHTML verwenden können.

1. textContent bekommt nur die Zeichen, dass der Inhalt eines Elements (minus beliebigen HTML) sind. Wenn das Element nur menschlichen Verbrauchstext enthält, ist dies höchstwahrscheinlich das, was Sie wollen.
2. innerHTML Ruft den Inhalt des Elements, einschließlich HTML-Inhalt. Verwenden Sie dies, wenn das fragliche Element den HTML-Inhalt enthält, den Sie als HTML und nicht als Text haben möchten. Bei der Verwendung von funktioniert eine etwas teurere Operation, da Sie den HTML-Parser bitten, den Inhalt zu analysieren, also verwenden Sie innerHTML nicht auf HTML-Inhalt.

Hier ist ein Beispiel für alle 3 der richtig verwendet oben:

window.addEventListener("DOMContentLoaded", function(){ 
 

 
    document.querySelector("button").addEventListener("click", function(){ 
 

 
    var input = document.getElementById("txtTest"); 
 
    var parent = document.getElementById("parent"); 
 

 
    // textContent will get the text characters as they are: 
 
    var textOnly = console.log("textContent of parent div is: " + parent.textContent); 
 

 
    // innerHTML will get the content of the element but will parse its HTML: 
 
    var htmlContent = console.log("innerHTML of parent div is: " + parent.innerHTML); 
 

 
    // value is ONLY for form-field elements: 
 
    console.log("The value of the div is: " + parent.value); // undefined 
 
    console.log("The value of the textbox is: " + input.value); 
 

 
    }); 
 

 
});

<input id="txtTest" type="text" placeholder="type in me and then click the button"> 
 
<div id="parent"> 
 
    <p>Nested child HTML</p> 
 
</div> 
 

 
<button>Click me to get results</button>

Also, wenn Ihr Szenario, dass der Inhalt ist, sagen wir eine Textbox, Ihre Lösung würde sein value zu verwenden, wie folgt aus:

var firstAuthorName = document.getElementById("firstAuthorName"); 
 
var button = document.querySelector("button"); 
 

 
button.addEventListener("click", function(){ 
 
    console.log("The first character in the textbox is: " + firstAuthorName.value.slice(0,1)); 
 
});

<input id="firstAuthorName" type="text" placeholder="type in me and then click the button"> 
 
<button>Click Me</button>