2016-11-24 4 views
0

から追加のスペース私がするとき、しかし、その後、別の要素Javascriptを - のTextContent

更新された文字列を置き、要素からテキストを取得する文字列の一部を削除し、疑問符&を追加しようとしています要素が返されると、マークアップによって追加の不要なスペースが生成されてから、&は要素内のまったく新しい行に疑問符を配置します。

これは私が達成しようとしているどのようなコンソールログ

console log コード例

// Set Variables for Dynamic Copy Function 
 

 
let \t choiceNode = document.querySelectorAll('.choice'); 
 
let \t dynamicCopyNode = document.querySelector('.dynamic-copy'); 
 

 
// Update the text type on dynamic copy & append a question mark + remove 'The ' 
 

 
function updateChoice() { 
 

 
\t let choiceSelected = this.textContent + '?'; 
 
\t let choiceSelectedTrim = choiceSelected.replace('The ', ''); 
 
\t dynamicCopyNode.textContent = choiceSelectedTrim; 
 

 
} 
 

 

 
// Click listener to trigger the function 
 

 
Array.from(choiceNode).forEach(function(element) { 
 
    element.addEventListener('click', updateChoice); 
 
});
<form> 
 
\t <div class="choice-wrapper"> 
 
\t \t <div class="choice"> 
 
\t \t \t <input type="radio" name="choice" id="one" value="1"> 
 
\t \t \t <label for="one"> 
 
\t \t \t \t <p class="name">The first choice</p> 
 
\t \t \t </label> 
 
\t \t </div> 
 
\t \t <div class="choice"> 
 
\t \t \t <input type="radio" name="choice" id="one" value="2"> 
 
\t \t \t <label for="one"> 
 
\t \t \t \t <p class="name">The second choice</p> 
 
\t \t \t </label> 
 
\t \t </div> 
 
\t \t <div class="choice"> 
 
\t \t \t <input type="radio" name="choice" id="one" value="3"> 
 
\t \t \t <label for="one"> 
 
\t \t \t \t <p class="name">The third choice</p> 
 
\t \t \t </label> 
 
\t \t </div> 
 
\t \t <div class="choice"> 
 
\t \t \t <input type="radio" name="choice" id="one" value="4"> 
 
\t \t \t <label for="one"> 
 
\t \t \t \t <p class="name">The fourth choice</p> 
 
\t \t \t </label> 
 
\t \t </div> 
 
\t \t <div class="error-wrap"> 
 
\t \t \t <label class="error" for="choice" generated="true"></label> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="copy-wrapper"> 
 
\t \t <div class="variable-copy"> 
 
\t \t \t <p>Why did you choose</p> 
 
\t \t \t <h1 class="dynamic-copy"></h1> 
 
\t \t </div> 
 
\t </div> 
 
</form>

から返されるものですので最初の選択肢のようなリターンですか?

+0

あなたは 'p'タグではなく、全体のdivのテキストの内容を必要とします。 –

+0

ああああ - 私は今理解しています。しかし、私がクリックした 'choice'から最も近い' .name'を取得しようとすると、nullを返しますか? – Minum

答えて

1

pタグのtextContentを取得する必要があります.Div全体ではありません。

// Set Variables for Dynamic Copy Function 
 

 
let \t choiceNode = document.querySelectorAll('.choice'); 
 
let \t dynamicCopyNode = document.querySelector('.dynamic-copy'); 
 

 
// Update the text type on dynamic copy & append a question mark + remove 'The ' 
 

 
function updateChoice() { 
 
    // ======================= next line changed 
 
\t let choiceSelected = this.querySelector('.name').textContent + '?'; 
 
\t let choiceSelectedTrim = choiceSelected.replace('The ', ''); 
 
\t dynamicCopyNode.textContent = choiceSelectedTrim; 
 

 
} 
 

 

 
// Click listener to trigger the function 
 

 
Array.from(choiceNode).forEach(function(element) { 
 
    element.addEventListener('click', updateChoice); 
 
});
<form> 
 
\t <div class="choice-wrapper"> 
 
\t \t <div class="choice"> 
 
\t \t \t <input type="radio" name="choice" id="one" value="1"> 
 
\t \t \t <label for="one"> 
 
\t \t \t \t <p class="name">The first choice</p> 
 
\t \t \t </label> 
 
\t \t </div> 
 
\t \t <div class="choice"> 
 
\t \t \t <input type="radio" name="choice" id="one" value="2"> 
 
\t \t \t <label for="one"> 
 
\t \t \t \t <p class="name">The second choice</p> 
 
\t \t \t </label> 
 
\t \t </div> 
 
\t \t <div class="choice"> 
 
\t \t \t <input type="radio" name="choice" id="one" value="3"> 
 
\t \t \t <label for="one"> 
 
\t \t \t \t <p class="name">The third choice</p> 
 
\t \t \t </label> 
 
\t \t </div> 
 
\t \t <div class="choice"> 
 
\t \t \t <input type="radio" name="choice" id="one" value="4"> 
 
\t \t \t <label for="one"> 
 
\t \t \t \t <p class="name">The fourth choice</p> 
 
\t \t \t </label> 
 
\t \t </div> 
 
\t \t <div class="error-wrap"> 
 
\t \t \t <label class="error" for="choice" generated="true"></label> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="copy-wrapper"> 
 
\t \t <div class="variable-copy"> 
 
\t \t \t <p>Why did you choose</p> 
 
\t \t \t <h1 class="dynamic-copy"></h1> 
 
\t \t </div> 
 
\t </div> 
 
</form>

+0

ありがとうございました...午前中に私の頭をしています!私は新しい変数を見つけようとしていて、その要素のテキストを見つけました...それは絶えずnullを返しました...振り返ってみると、なぜそれが私のために働いていなかったのかわかりません – Minum

+0

'choiceLabel = document.querySelector( '。name');'関数内で、新しい変数 'choiceText = this.choiceLabel.textContent; 'を設定しました。これは未定義を返していました。 – Minum

関連する問題