Reassigning text values w/o getElementById()

@GoldDogMay 20.2003

Once upon a time, there was a subtotal needing to be displayed on a page…

This subtotal was actually just one of several possible subtotals. At first it seemed easy to assign that subtotal an ID and display it with getElementById(), but the developer soon realized that hiding all the other possible subtotal IDs would shortly become a substantial spaghetti situation.

So the question is this: I’ve figured out how to reassign image values using image.src, but how do I reassign text values? I know, an easy question, but I’m more (or less) than a JS novice, so your kind suggestions would be most appreciated.

thanks

to post a comment

JavaScript

20 Comments(s) _↴

@GollumMay 20.2003 — #try these...

<input type=text id=myText>

use document.getElementById('myText').value = "Here's Johnny";

<span id=mySpan>Subtotal goes here</span>

use document.getElementById('mySpan').firstChild.nodeValue = "New Subtotal";

@GoldDogauthorMay 20.2003 — #So, am I on the right track...?

function doPrice() {

document.getElementById('price').firstChild.nodeValue = "";

document.getElementById('price').style.display = '';

}

<input type="radio" onclick="doPrice('mynewprice')> set new price

What is the firstChild reference? I assume that needs to change, but to what?

@JonaMay 20.2003 — #[b][font=arial][color=maroon]Post a little bit of your form, please. If you're going to use DOM objects, the code you were given by Gollum will work fine--assuming that the first child node inside of your element (retreived by the getElementById('price') method) is the element/node you would like to edit the text of. So, using your example, the following would apply:[/color][/font][/b]

[font=courier new]

<script type="text/javascript">



</script>

[/font]

[b][font=arial][color=maroon]And this would go in your BODY for your form:[/color][/font][/b]

[font=courier new]

<form action="" name="f">

<div>

<input type="radio" onClick="changePrice('$30');"><span id="price"> $40</span>

</div>

</form>

[/font]

@GoldDogauthorMay 20.2003 — #That worked like a charm! Thanks!

Now comes the hard part. the form works something like this:

User chooses radio option from #1...

<input type="radio" value="1">

<input type="radio" value="2">

Then user chooses radio option from #2...

<input type="radio" onclick="changePrice('$123')">

<input type="radio" onclick="changePrice('$456')">

Now, the prices appearing in question #2 are actually dependent upon the choices made in #1. So if the user goes back and chooses value="2" after already choosing value="1", I need for to be able to change the values appearing in the onclick events in question #2, and also force the displayed values in the <span> element to match the new values. Follow that?

I'll also need to change some images displayed as a result of functions called in those onclick events, but I suspect if you can help me through this issue, I'll be able to figure that part out on my own (no guarantees).

thanks again

@JonaMay 20.2003 — #[font=courier new]

<script type="text/javascript">



</script>

[/font]

[font=courier new]

<form action="" name="f">

<div>

<input type="radio" onClick="changePrice('$30','price1');"><span id="price1"> $40</span><br>

<input type="radio" onClick="changePrice('$20','price2');"><span id="price2"> $60</span>

</div>

</form>

[/font]

@GoldDogauthorMay 20.2003 — #I don't think I explained myself very well. Let me give you a better snapshot of what's going on...

<script type="text/javascript">



</script>

<span id="price">subtotal here</span>

<form>

#1.

<input type="radio" value="1"> if chosen, display $12 and $34 for question #2, respectively

<input type="radio" value="2"> if chosen, display $56 and $78 for question #2, respectively

#2.

<input type="radio" onclick="changePrice('value as assigned from question#1')"> 1st choice

<input type="radio" onclick="changePrice('value as assigned from question#1')"> 2nd choice

</form>

Does that make more sense? The text next to the various radio buttons will never change, just the values they transmit. So I guess what is needed is an onclick event in #1 which reassigns the values for #2.

@JonaMay 20.2003 — #[b][font=arial][color=maroon]I'm having a bit of trouble understanding that, as well... [/color][/font][/b]

@JonaMay 20.2003 — #[b][font=arial][color=maroon]Wait a sec... I don't get it. It works for me. I guess I still don't understand what you want to do..[/color][/font][/b]

@GoldDogauthorMay 21.2003 — #Aaahh, clients. Gotta love 'em. :mad:

The specs changed today (again). Now the price calculations I was fumbling with are no longer needed on this page. However, the issue I'm dealing with still remains.

So, here's the scenario. I hope this is clear...

There's this form, and in this form there is question #1. This question has 6 radio options:

#1.

<input value="A"> A

<input value="B"> B

<input value="C"> C

<input value="D"> D

<input value="E"> E

<input value="F"> F

Then there's question #2, which has 3 radio options. These 3 options need to change the values sent through the onclick function calls based on which option in #1 is selected. For example, by default, #2 looks like this:

#2.

<option onclick="doStyle('a')"> 'SF'

<option onclick="doStyle('b')"> 'GR'

<option onclick="doStyle('c')"> 'HD'

IF the user selects option 'D' 'E' or 'F' in #1 however, #2 needs to look like this:

#2.

<option onclick="doStyle('e')"> 'SF'

<option onclick="doStyle('f')"> 'GR'

<option onclick="doStyle('g')"> 'HD'

All 3 onclicks above need to change, regardless which of the latter 3 choices in #1 are chosen. Make sense?

Now, the twist: If the user has selected options 'A' 'B' or 'C' in #1, goes on to choose 'SF' in #2, then goes back to question #1 and reselects option 'D' 'E' or 'F', the onclicks in #2 need to change and automatically resend the adjusted onclick event. Strange but true.

@JonaMay 21.2003 — #OK, but I still don't get it. It works for me. Just fine. I mean, when you click #1 option A, what happens to #2's options? When I click #1 option B, what happens to #2's options? Sorry, but either you're not explaining yourself correctly, or I don't even understand what you want--what your question is...

@GoldDogauthorMay 21.2003 — #When you click options A, B or C in #1, nothing happens to the values in the onclicks in #2. But when you click options D, E or F in #1, the values in the onclicks in #2 need to change.

Currently, the coding for these onclicks in #2 is static, and needs to be dynamic.

Look at the adjusted page here: http://whbars.com/demo2/DesignYourBar.cfm?budget=5-10

If an 8' floorplan is selected, the styles available in #2 need to reflect the 8' floorplan, instead of the 6' options.

@JonaMay 21.2003 — #That's not my question. I want to know what is wrong with your page as it is? It works fine for me. I am assuming you're looking for additional functionality, however, I do not understand what this functionality should be. When you click on radio buttons on your page, the page updates accordingly and perfectly...

@GoldDogauthorMay 21.2003 — #Currently, the styles displayed by choices made in #2 are for the 6' floorplans. No matter whether the 8' floorplan is chosen in #1 or not, the 6' styles are shown. This needs to change so that I can display the 8' styles for the 8' floorplans.

@JonaMay 21.2003 — #OK, but I still don't quite understand. It shows the right image for each one in #1. In #2 it shows the right text. So where is the problem?

@GoldDogauthorMay 21.2003 — #I've found a way to make it work. It's not as scalable as I would like, but it'll work for this client's needs just fine.

http://whbars.com/demo2/DesignYourBar.cfm?budget=5-10

When you see how this works, I think you may understand what I was after. thanks for the help.

@JonaMay 21.2003 — #The only difference I noticed was that it now takes two clicks instead of one click to get it to work. Other than that, it all looks the same to me.

@GoldDogauthorMay 21.2003 — #What platform/browser are you using? I'm seeing some problems with Netscape 7, but IE 6 works great.

When the user chooses a different floorplan than their original choice, any styles currently displayed are hidden and the #2 question is reset (actually a different <span id> is displayed) and the submit button is hidden.

Are you not seeing this happen?

@JonaMay 21.2003 — #Well, I'm using IE6 and it works fine for me. Windows Me Operating system.

@GoldDogauthorMay 21.2003 — #I'm at a loss then. If you are seeing the behavior I just described, I would be hard put to understand how you saw that before I made those changes.

What matters is that it works now. thank again.

@havikMay 21.2003 — #Edited: I posted some code but I really should read the entire thread before I make any replies ?

BTW I checked your link and everything seems to be working fine in Opera 7.1

Havik

Also in #JavaScript _↴

How to return form data to parent window JSP and JavaScript FireFox Referrence Guide

Success!

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

Tweet This

Reassigning text values w/o getElementById()

20 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Reassigning text values w/o getElementById()

20 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

20 Comments(s) _↴

Also in #JavaScript _↴