Reassigning text values w/o getElementById()

[GoldDog]

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

[Gollum]

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

[GoldDog]

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?

[Jona]

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:


<script type="text/javascript">
<!--
function changePrice(newPrice) {
document.getElementById('price').firstChild.nodeValue = newPrice;
document.getElementById('price').style.display = "";
}
// -->
</script>


And this would go in your BODY for your form:


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

[GoldDog]

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

[Jona]

<script type="text/javascript">
<!--
function changePrice(newPrice, objId) {
document.getElementById(objId).firstChild.nodeValue = newPrice;
document.getElementById(objId).style.display = "";
}
// -->
</script>



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

[GoldDog]

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">
<!--
function changePrice(newPrice) {
document.getElementById('price').firstChild.nodeValue = newPrice;
document.getElementById('price').style.display = "";
}
// -->
</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.

[Jona]

I'm having a bit of trouble understanding that, as well...

[Jona]

Wait a sec... I don't get it. It works for me. I guess I still don't understand what you want to do..

[GoldDog]

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.

[Jona]

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

[GoldDog]

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.

[Jona]

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

[GoldDog]

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.

[Jona]

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?

[GoldDog]

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.

[Jona]

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.

[GoldDog]

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?

[Jona]

Well, I'm using IE6 and it works fine for me. Windows Me Operating system.

[GoldDog]

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.

[havik]

Edited: I posted some code but I really should read the entire thread before I make any replies :D

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

Havik