I'm trying to change paragraph text in a for each loop. This seems like a simple issue (specific to JS?). I'm new to this language, coming from Matlab and Java. Fiddle attached. Any help is appreciated.
https://jsfiddle.net/npkx3of4/1/
function myFunction() {
var ps = document.getElementsByClassName('.test');
for (var p of ps) {
p = p.replace('a', '<span style="color:blue;">b</span>');
}
alert("Working?");
return null;
}
getElementsByClassName('.test') should be getElementsByClassName('test').
You should be assigning the result of replacing the innerHTML of the paragraph back to the innerHTML of the paragraph.
function myFunction() {
var ps = document.getElementsByClassName('test');
for (var p of ps) {
p.innerHTML = p.innerHTML.replace('a', '<span style="color:blue;">b</span>');
}
alert("Working?");
return null;
}<h1>Test</h1>
<hr>
<p class="test">a</p>
<button type="button" onclick='myFunction();'>Click Me!</button>There isn't any need to add a period before the class name when using getElementsByClassName.
var ps = document.getElementsByClassName('test');
Select only the plain text content inside the element, then replace all the specified characters before rewriting the inner HTML.
...
for (var p of ps) {
p.innerHTML = p.textContent.replaceAll('a', '<span style="color:blue;">b</span>');
}
...