Javascript更改 <p> 內容取決於選擇選項

Question

用Javascript不是最好的，所以我想問我哪里出錯了。

正如標題所示，我有一個包含4個不同選項的選擇框，當選擇一個選項時，我想更改id為pricedesc的<p>標簽的內容。 這是我到目前為止所擁有的。

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 Accommodation" ) {
    priceDesc = "Enter price per week";
    }
    else if ( sel.options[sel.selectedIndex].value == "Sale" ) {
    priceDesc = "Enter for sale price";
    }

} 

在身體我有：

            <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 Accommodation">Serviced Accommodation</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" />

謝謝你的幫助。

J.

Answer 1

更改您設置段落內容的行

priceDesc = "Enter price per month";

至

priceDesc.innerHTML = "Enter price per month";

目前，您只是將priceDesc變量更改為包含字符串而不是段落節點。 設置節點的innerHTML屬性會更改其中包含的html。 ：d

Answer 2

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 Accommodation" ) {
    priceDesc.innerHTML = "Enter price per week";
    }
    else if ( sel.options[sel.selectedIndex].value == "Sale" ) {
    priceDesc.innerHTML = "Enter for sale price";
    }

} 

您想要設置innerHTML屬性。

作為旁注，我建議使用jQuery javascript框架（ http://jquery.com/ ），因為它使這樣的任務更加簡單。

Answer 3

您必須使用innerHTML才能更改元素的內容。 有一種誤解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 Accommodation" ) {
      priceDesc.innerHTML = "Enter price per week";
    }
    else if ( sel.options[sel.selectedIndex].value == "Sale" ) {
      priceDesc.innerHTML = "Enter for sale price";
    }
}

演示