Question

我有一个选择下拉框，它会在选中时返回一个特定值，这样可以正常工作。然而，我已经尝试添加成人文本形式的数量，以便在按下相同的按钮时返回该值，并且没有任何作用，这让我感到困惑，因为它似乎应该很简单，但我尝试的任何工作都没有，这是我的HTML：< / p>

        <form>
    <select id = "journeyList">
    <option name ="Bristol " value="40">Bristol - Newcastle</option>
    <option name ="London " value="35" >Bristol - London</option>
    <option name ="Glasgow " value="70" >Glasgow - Manchester</option>
    </select><br><br>
    </form>

    Number of Adults: 
    <form>
    <input type = "number" name ="adult" id="ofAdults" value="" required>
    </form>
    <button type="button" onclick="BookingFare(); return false;">Submit</button><br>

使用Javascript：

function BookingFare() { 

        var journeyList = document.getElementById("journeyList");
        var price = journeyList.options[journeyList.selectedIndex].value;

        var Adults = getElementById("ofAdults").value;
        //var ofChildren = getElementById('children').value;
        //var Discount
        //var Total
        //var SeatsLeft

        if (journeyList == 40) {
         var price = journeyList.value;
        }

        if (journeyList == 35) {
         var price = journeyList.value;

        }

        if (journeyList == 70) {
         var price = journeyList.value;
        }

        document.getElementById('priceBox').innerHTML = price;
        document.getElementById('adultsBox').innerHTML = Adults;

        }

这只是我遇到问题的成年人的回归价值。

Answer 1

您缺少“文档”。访问ofAdults元素时。

应该是

var Adults = document.getElementById("ofAdults").value

Answer 2

HTML

<select id = "journeyList">
    <option name ="Bristol " value="40">Bristol - Newcastle</option>
    <option name ="London " value="35" >Bristol - London</option>
    <option name ="Glasgow " value="70" >Glasgow - Manchester</option>
    </select><br><br>


    Number of Adults: 
    <form>
    <input type = "number" name ="adult" id="ofAdults" value="" required>

    <button type="button" onclick="BookingFare(); return false;">Submit</button><br>
        <div id="priceBox"></div>
               <div id="adultsBox"></div>

JAVASCRIPT

function BookingFare() { 

        var journeyList = document.getElementById("journeyList");
        var price =journeyList.options[journeyList.selectedIndex].value;

        var Adults = document.getElementById("ofAdults").value;

        document.getElementById('priceBox').innerHTML = price;
        document.getElementById('adultsBox').innerHTML = Adults;

        }

这将显示div中的当前列表值和文本框值

<强> DEMO

<强>注1：你的if语句需要一些修改

在你的情况下，journeyList是一个对象，所以你不能直接做下面的事情

 if (journeyList == 40) {
         var price = journeyList.value;
        }

如果你想做某事，那么你必须这样做

 if (journeyList.options[journeyList.selectedIndex].value== '40') 

{ 
// your code goes here 

}

注意2：通常我们在onchange事件中获取选择值。所以我最好使用onchange事件，然后点击这里不需要按钮就可以看到选择更改时的详细信息。

如果您想以这种方式使用，请使用以下代码

<select id = "journeyList" onchange="BookingFare();">
    <option name ="Bristol " value="40">Bristol - Newcastle</option>
    <option name ="London " value="35" >Bristol - London</option>
    <option name ="Glasgow " value="70" >Glasgow - Manchester</option>
    </select><br><br>


    Number of Adults: 
    <form>
    <input type = "number" name ="adult" id="ofAdults" value="" required>

    <button type="button">Submit</button><br>
        <div id="priceBox"></div>
               <div id="adultsBox"></div>

<强> JS

function BookingFare() { 

        var journeyList = document.getElementById("journeyList");
        var price =journeyList.options[journeyList.selectedIndex].value;

        var Adults = document.getElementById("ofAdults").value;

        document.getElementById('priceBox').innerHTML = price;
        document.getElementById('adultsBox').innerHTML = Adults;

        }

无需点击按钮这里

<强> DEMO

从表单javascript返回值的麻烦

2 个答案: