Javascript - 来自textContent的额外空间

Question

我试图从一个元素中获取文本，删除一些字符串，添加一个问号＆amp;然后将更新后的字符串放入另一个元素

但是，当返回元素时，标记会在＆amp;之前生成额外的不需要的空间。也将问号放在元素内的一个全新的行上。

这是从控制台日志返回的内容

代码示例

＆＃13;

＆＃13;

// Set Variables for Dynamic Copy Function

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

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

function updateChoice() {

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

}


// Click listener to trigger the function

Array.from(choiceNode).forEach(function(element) {
  element.addEventListener('click', updateChoice);
});

＆＃13;

<form>
	<div class="choice-wrapper">
		<div class="choice">
			<input type="radio" name="choice" id="one" value="1">
			<label for="one">
				<p class="name">The first choice</p>
			</label> 
		</div>
		<div class="choice">
			<input type="radio" name="choice" id="one" value="2">
			<label for="one">
				<p class="name">The second choice</p>
			</label> 
		</div>
		<div class="choice">
			<input type="radio" name="choice" id="one" value="3">
			<label for="one">
				<p class="name">The third choice</p>
			</label> 
		</div>
		<div class="choice">
			<input type="radio" name="choice" id="one" value="4">
			<label for="one">
				<p class="name">The fourth choice</p>
			</label> 
		</div>
		<div class="error-wrap"> 
			<label class="error" for="choice" generated="true"></label> 
		</div>
	</div>
	<div class="copy-wrapper">
		<div class="variable-copy">
			<p>Why did you choose</p>
			<h1 class="dynamic-copy"></h1>
		</div>
	</div>
</form>

＆＃13;

＆＃13;

＆＃13;

我想要实现的目标是回归首选？

Answer 1

您必须获取textContent代码的p，而不是整个div。

// Set Variables for Dynamic Copy Function

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

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

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

}


// Click listener to trigger the function

Array.from(choiceNode).forEach(function(element) {
  element.addEventListener('click', updateChoice);
});

<form>
	<div class="choice-wrapper">
		<div class="choice">
			<input type="radio" name="choice" id="one" value="1">
			<label for="one">
				<p class="name">The first choice</p>
			</label> 
		</div>
		<div class="choice">
			<input type="radio" name="choice" id="one" value="2">
			<label for="one">
				<p class="name">The second choice</p>
			</label> 
		</div>
		<div class="choice">
			<input type="radio" name="choice" id="one" value="3">
			<label for="one">
				<p class="name">The third choice</p>
			</label> 
		</div>
		<div class="choice">
			<input type="radio" name="choice" id="one" value="4">
			<label for="one">
				<p class="name">The fourth choice</p>
			</label> 
		</div>
		<div class="error-wrap"> 
			<label class="error" for="choice" generated="true"></label> 
		</div>
	</div>
	<div class="copy-wrapper">
		<div class="variable-copy">
			<p>Why did you choose</p>
			<h1 class="dynamic-copy"></h1>
		</div>
	</div>
</form>