Javascript - 私の文字列の最初の文字を取得する - エラー

Question

なぜコンソールが関数ではないと言うのか教えていただけますか？

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

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

その後、私は、このことにより、テキストを取得：

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

だから、コンソールは言う： "キャッチされない例外TypeErrorを：firstAuthorName.sliceは関数ではありません" あなたはコンテンツにアクセスする必要が

Answer 1

をHTML要素の最初の文字を取得します。オブジェクトの内容ではなく、HTML DOMオブジェクト自体から最初の文字を取得しようとしています。

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：要素がフォームフィールド（ラジオボタン、チェックボックス、 テキストボックスなど）の場合は、フォームフィールドに の値を取得するのに常にvalueが使用されます。

1b。 valueものようにHTML要素の属性の値を取得するために使用される非フォームフィールドの要素については

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">

、あなたはtextContentやinnerHTMLを使用することができます。

1. textContentだけの要素（マイナス任意のHTML）の内容文字を取得します。要素に人間の消耗品テキスト しか含まれていない場合は、これが最も可能性の高いものです。
2. innerHTMLは、HTMLコンテンツを含め、要素の内容を取得します。対象の要素に、テキストではなくHTMLとして表示するHTMLコンテンツ が含まれている場合に使用します。 textContentの代わりにinnerHTML を使用しているときに、 オペレーションを実行するには少し高価ですが、HTMLパーサーに内容を解析するように依頼しているため、innerHTMLはHTML以外のコンテンツには使用しないでください。

ここで正しく使用上記のすべての3のサンプルです：だから

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>

、あなたのシナリオは、コンテンツが入っているということであれば、テキストボックスを言って、あなたのソリューションが考えこのように、valueを使用すること：

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>