not the best with Javascript so thought i'd ask where i'm going wrong.

as the title suggests, I have a select box with 4 different options, when an option is selected I want to change the contents of a <p> tag with id of pricedesc. Here is what I have so far.

function priceText(sel)
{
    var listingType = document.getElementById('listingtype');
    var priceDesc = document.getElementById('pricedesc');
    if ( sel.options[sel.selectedIndex].value == "Residential Letting" ) {
    priceDesc = "Enter price per month";
    }
    else if ( sel.options[sel.selectedIndex].value == "Short Let" ) {
    priceDesc = "Enter price per week";
    }
    else if ( sel.options[sel.selectedIndex].value == "Serviced Acmodation" ) {
    priceDesc = "Enter price per week";
    }
    else if ( sel.options[sel.selectedIndex].value == "Sale" ) {
    priceDesc = "Enter for sale price";
    }

} 

and in the body i have:

            <label>Listing Type:</label>
            <select name="listingtype" id="listingtype" onchange="priceText(this);">
                <option value="Residential Letting">Residential Letting</option>
                <option value="Short Let">Short Let</option>
                <option value="Serviced Acmodation">Serviced Acmodation</option>
                <option value="Sale">Sale</option>
            </select>


            <label>Price:</label>
            <p id="pricedesc">Enter price</p>
            <input name="price" type="text" id="price" value="<%=Request.Form("price")%>" maxlength="10" />

Thanks for your help.

J.

not the best with Javascript so thought i'd ask where i'm going wrong.

as the title suggests, I have a select box with 4 different options, when an option is selected I want to change the contents of a <p> tag with id of pricedesc. Here is what I have so far.

function priceText(sel)
{
    var listingType = document.getElementById('listingtype');
    var priceDesc = document.getElementById('pricedesc');
    if ( sel.options[sel.selectedIndex].value == "Residential Letting" ) {
    priceDesc = "Enter price per month";
    }
    else if ( sel.options[sel.selectedIndex].value == "Short Let" ) {
    priceDesc = "Enter price per week";
    }
    else if ( sel.options[sel.selectedIndex].value == "Serviced Acmodation" ) {
    priceDesc = "Enter price per week";
    }
    else if ( sel.options[sel.selectedIndex].value == "Sale" ) {
    priceDesc = "Enter for sale price";
    }

} 

and in the body i have:

            <label>Listing Type:</label>
            <select name="listingtype" id="listingtype" onchange="priceText(this);">
                <option value="Residential Letting">Residential Letting</option>
                <option value="Short Let">Short Let</option>
                <option value="Serviced Acmodation">Serviced Acmodation</option>
                <option value="Sale">Sale</option>
            </select>


            <label>Price:</label>
            <p id="pricedesc">Enter price</p>
            <input name="price" type="text" id="price" value="<%=Request.Form("price")%>" maxlength="10" />

Thanks for your help.

J.

• forms
• select
• javascript

• You may also want to have a default description of "Enter monthly rate for Residential Letting, weekly rate for Short Let or Serviced Acodation, or sale price" for users who don't have JS enabled. And then just replace it on page load with "Enter price" for everyone else. Oh, and use the for attribute in your labels to tie it to its input. – Lèse majesté Commented Jul 5, 2010 at 16:18

3 Answers 3

Change the line where you set the contents of the paragraph from

priceDesc = "Enter price per month";

to

priceDesc.innerHTML = "Enter price per month";

Currently, you are just changing the priceDesc variable to contain a string instead the paragraph node. Setting the innerHTML attribute of a node changes the html contained inside of it. :D

function priceText(sel)
{
    var listingType = document.getElementById('listingtype');
    var priceDesc = document.getElementById('pricedesc');
    if ( sel.options[sel.selectedIndex].value == "Residential Letting" ) {
    priceDesc.innerHTML = "Enter price per month";
    }
    else if ( sel.options[sel.selectedIndex].value == "Short Let" ) {
    priceDesc.innerHTML = "Enter price per week";
    }
    else if ( sel.options[sel.selectedIndex].value == "Serviced Acmodation" ) {
    priceDesc.innerHTML = "Enter price per week";
    }
    else if ( sel.options[sel.selectedIndex].value == "Sale" ) {
    priceDesc.innerHTML = "Enter for sale price";
    }

} 

You want to set the innerHTML attribute.

As a side note, I would suggest using the jQuery javascript framework going forward ( http://jquery./ ), as it makes tasks like this much simpler.

You have to use innerHTML in order to change the content of an element. There is a misconception btw:

function priceText(sel) // <- but why pass sel here??
{
    sel = document.getElementById('listingtype'); // <- when you select it here
    var priceDesc = document.getElementById('pricedesc');
    if ( sel.options[sel.selectedIndex].value == "Residential Letting" ) {
      priceDesc.innerHTML = "Enter price per month";
    }
    else if ( sel.options[sel.selectedIndex].value == "Short Let" ) {
      priceDesc.innerHTML = "Enter price per week";
    }
    else if ( sel.options[sel.selectedIndex].value == "Serviced Acmodation" ) {
      priceDesc.innerHTML = "Enter price per week";
    }
    else if ( sel.options[sel.selectedIndex].value == "Sale" ) {
      priceDesc.innerHTML = "Enter for sale price";
    }
}

Demo