から追加のスペース私がするとき、しかし、その後、別の要素Javascriptを - のTextContent
に更新された文字列を置き、要素からテキストを取得する文字列の一部を削除し、疑問符&を追加しようとしています要素が返されると、マークアップによって追加の不要なスペースが生成されてから、&は要素内のまったく新しい行に疑問符を配置します。
これは私が達成しようとしているどのようなコンソールログ
// 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>
から返されるものですので最初の選択肢のようなリターンですか?
あなたは 'p'タグではなく、全体のdivのテキストの内容を必要とします。 –
ああああ - 私は今理解しています。しかし、私がクリックした 'choice'から最も近い' .name'を取得しようとすると、nullを返しますか? – Minum