/    Sign up×
Community /Pin to ProfileBookmark

Using Javascript to alter source code

Copy linkTweet thisAlerts:
Oct 17.2007

OK, I’m really confused here. I know how to use Javascript to display text in the browser or manipulate layers and images. But I’m being told that I need to use Javascript to dynamically fill some information in the source code of the page. I didn’t think Javascript could manipulate the source code – am I wrong?

Here’s the deal. I have an affiliate program that tracks purchases via an image tag on the check-out page. One of the variables the image needs is the amount field:

<img src=”https://www.affiliate.com/u?AMOUNT=[amount]” />

I need to fill the amount. It can’t be done via the cart because the cart doesn’t have a tag that can fill this in properly (it includes a $ sign, which I need to strip away). Since it’s within the cart’s functionality, I can’t reprogram it on the server-side either. Hence, I’m told I need to do it via Javascript.

But how? I have found no examples where Javascript was writing an actual tag into the source code. Is this possible? Thanks!

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@scragarOct 17.2007 — [code=html]<script type="text/javascript">
function imgedit(){
var amnt = document.getElementById("InAmount").value;
document.getElementById("ImAmount").src = "https://www.affiliate.com/u?AMOUNT="+amnt;
};
</script>
<input type="text" id="InAmount" />
<img src="https://www.affiliate.com/u?AMOUNT=" alt="afiliate image." />
<a href="javascript: imgedit();">edit.</a>[/code]
Copy linkTweet thisAlerts:
@CrowandaziauthorOct 17.2007 — Thanks!

Not to seem daft, however, but it looks like this code is simply updating a text field. Does the text field act as a replacement for the img tag?

Plus it requires user interaction. It needs to happen automatically. Would an onLoad() function take care of this?
Copy linkTweet thisAlerts:
@scragarOct 17.2007 — 4th line of the box changes the image source. take the idea and run with it.
Copy linkTweet thisAlerts:
@Declan1991Oct 17.2007 — Thanks!

Not to seem daft, however, but it looks like this code is simply updating a text field. Does the text field act as a replacement for the img tag?

Plus it requires user interaction. It needs to happen automatically. Would an onLoad() function take care of this?[/QUOTE]
It is almost exactly the same because it is the same really. The only difference is that you are not changing the value attribute, but the src instead. Try window.onload instead of onLoad in the body tag.
Copy linkTweet thisAlerts:
@CrowandaziauthorOct 18.2007 — I swear I am otherwise a fairly talented programmer, but I just don't get this.

So, the text field can have a src attribute just like an image tag can? And it is the text field that is communicating with the affiliate's website?

I ask this, because there is nothing in that code that explicitly changes the img tag... getElementById("ImAmount") refers quite clearly to the text field.

This code may work, but you have to admit that this is extremely counterintuitive - why involve the text field? What am I missing?

Sorry to be such a hassle! Thanks for the help!
Copy linkTweet thisAlerts:
@cridleyOct 18.2007 — I think it's a typo:

[code=html]<script type="text/javascript">
function imgedit(){
var amnt = document.getElementById("InAmount").value;
document.getElementById("ImageAmount").src = "https://www.affiliate.com/u?AMOUNT="+amnt;
};
</script>
<input type="text" id="InAmount" />
<img src="https://www.affiliate.com/u?AMOUNT=" id="ImageAmount" alt="afiliate image." />
<a href="javascript: imgedit();">edit.</a>[/code]

So it gets the amount from the text box, appends it to the url then change the src attribute of the image.
Copy linkTweet thisAlerts:
@scragarOct 18.2007 — im was the image, look at it's ID.

in was the input, look at it's ID.

text fields don't have src atributes. you can only change the atributes something has normaly(height, width, style etc).

EDIT: I must have accidentaly deleted the ID of the image.
Copy linkTweet thisAlerts:
@CrowandaziauthorOct 18.2007 — AAAAHHHHH..... That makes sense. I'm a really literal guy, so when I didn't see the id for the image tag, I was confused. A thousand thanks....
Copy linkTweet thisAlerts:
@cridleyOct 18.2007 — like I said, typo. ?
×

Success!

Help @Crowandazi spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...