Minum Minum - 7 days ago 5
HTML Question

Javascript - additional space from textContent

I'm attempting to get the text from an element, remove some of the string, add a question mark & then place the updated string into another element

However, when the element is returned, the markup generates additional unwanted space before & also puts the question mark on an entirely new line within the element.

This is what is returned from a console log

console log
Code Example



// 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);
});

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





What I'm trying to achieve is a return like so first choice?

Answer

You have to get the textContent of the p tag, not the whole 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>

Comments