Webwide is the inclusive forum community for web designers, developers & makers.

Whether you're an enthusiast, in training, or a seasoned pro – you'll fit right in at Webwide. We understand that our community is one of creation which is why we, unlike many other discussion forums, encourage sharing of your own projects and content. Creating a forum account is fast, easy and completely free so you can start participating right away.

Read our Code of Conduct

Free Forum Membership Benefits

  • Participate in hundreds of interesting discussions
  • Network with industry peers and make new connections
  • Show off your own projects and relevant content
  • Get help and feedback for your coding and designs
  • Buy and sell services and resources in the marketplace
  • Participate in our friendly community challenges
  • Earn trophies and work your way up our leaderboards
  • Enjoy exclusive Webwide member discounts and offers
  • ...and so much more!

Help Wanted Simple javascript

RobinHood

Member
Joined
Jan 6, 2020
Messages
26
Reaction score
12
Points
8
Credits
57
I don't know js, but I'm trying to figure out a simple text replacement on content that is loaded from an iframe.

Within the iframe there's a .campaign class

I'm trying to select the contents of each campaign div, find a dash '-' and remove it.

I tried the following and it doesn't seem to work.

JavaScript:
    var x = document.querySelectorAll(".campaign");
    for (i = 0; i< x.length; i++) {
        x[i].innerText.replace("-", "");
    }
When I run it in the console it outputs the updated text properly with the dash removed, but doesn't update it on the page itself.

I'm not sure how to insert the variable contents back into the dom, or alternatively just loop through the live .campaign divs in the dom and do the replacement direct on them.

Can anyone help?

Thanks
 
Last edited:

Gummibeer

Astroneer
Joined
Oct 5, 2019
Messages
1,060
Reaction score
889
Points
985
Age
27
Location
Hamburg, Germany
Local Time
Today, 10:34
Website
gummibeer.de
Credits
2,036
Real Name
Tom Witkowski
You simply miss the assignment back to the innerText.

Code:
    var x = document.querySelectorAll(".campaign");
    for (i = 0; i< x.length; i++) {
        x[i].innerText = x[i].innerText.replace("-", "");
    }
But you also can use forEach instead of the for loop.

Code:
Array.from(document.querySelectorAll(".campaign"))
    .forEach(function (el) {
        el.innerText = el.innerText.replace('-', '');
    });
 
  • Cheer
Reactions: RobinHood

RobinHood

Member
Joined
Jan 6, 2020
Messages
26
Reaction score
12
Points
8
Credits
57
Ah, brilliant, cheers @Gummibeer!

That works, but it also removes the link in the div.

Original div looks like this:

HTML:
<div class="campaign">09/06/2020 -
<a href="http://us12.campaign-archive.com/....." title="Newsletter - JUNE " target="_blank">Newsletter - JUNE</a>
</div>
And the replaced div looks like this:

HTML:
<div class="campaign">09/06/2020
<br>
Newsletter - JUNE</div>
So I read up about textContent innerText and innerHTML

Turns out innerHTML is what I wanted!

Final working code as follows:

JavaScript:
    var x = document.querySelectorAll(".campaign");
    for (i = 0; i< x.length; i++) {
        x[i].innerHTML = x[i].innerHTML.replace("2020 -", "2020");
    }
or

JavaScript:
    Array.from(document.querySelectorAll(".campaign"))
    .forEach(function (el) {
        el.innerHTML = el.innerHTML.replace('2020 -', '2020');
    });
All this just to remove a few dashes from a Mailchimp embed form that has been reshuffled around to bit to change to order the content is displayed 🙈
 
Last edited:
  • Like
Reactions: Gummibeer
Top