Javascript 根据选择选项更改 <p> 内容

Javascript change <p> content depending on select option

提问by JBoom

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

不是最好的 Javascript 所以我想我会问我哪里出错了。

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.

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. 这是我到目前为止所拥有的。

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

} 

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

Thanks for your help.

谢谢你的帮助。

J.

J。

回答by Gordon Gustafson

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 priceDescvariable to contain a string instead the paragraph node. Setting the innerHTMLattribute of a node changes the html contained inside of it. :D

目前，您只是将priceDesc变量更改为包含字符串而不是段落节点。设置innerHTML节点的属性会更改其中包含的 html。:D

回答by Mike Sherov

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

} 

You want to set the innerHTML attribute.

您想设置innerHTML 属性。

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

作为旁注，我建议使用 jQuery javascript 框架（http://jquery.com/），因为它使这样的任务更简单。

回答by gblazex

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

您必须使用 innerHTML 才能更改元素的内容。顺便说一句，有一个误解：

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

Demo

演示