从DOM获取值并传递给函数

时间:2020-04-27 11:17:56

标签: javascript

所以我正在用Javascript编写以下函数。

function storeBooking (firstname, lastname, age, species, is1day, is4day, is10day)  {
    var trip = ""
    if(is1day) trip ="1 day";
    if(is4day)+=", 4 days";
    if(is10day) += ", 10 days";
    sessionStorage.trip = trip;
    sessionStorage.firstname = firstname;
    sessionStorage.lastname = lastname;
    sessionStorage.age = age;
    sessionStorage.species = species;

    alert ("Trip storage: " + sessionStorage.trip); 
}

我的任务是确保该功能将用户信息输入存储在sessionStorage中-即名字,姓氏,年龄,种类,旅行,食物和partySize。但是,food和partySize不能作为函数参数传递。但是,我不确定如何从DOM获取那些值。

HTML 1

<label for="food">Menu preferences</label>
        <select name="food" id="food">
            <option value="none">Please select</option>
            <option value="lembas">Lembas</option>
            <option value="mushrooms">Mushrooms</option>
            <option value="ent">Ent Draft</option>
            <option value="cram">Cram</option>
        </select>
    </p>
    <p>
    <label for="partySize">Number of Travellers</label>
            <input type="text" id="partySize" name="partySize" maxlength="3" size="3" />
    </p>

必须在其中传输数据的HTML 2

<input type="hidden" name="food" id="food" />
<input type="hidden" name="partySize" id="partySize" />

2 个答案:

答案 0 :(得分:1)

如果您不想修改参数,则可以通过以下方式直接获得内部函数

var food = document.getElementById("food").value;
        var partySize= document.getElementById("partySize").value;  




function storeBooking (firstname, lastname, age, species, is1day, is4day, is10day)  {
        var food = document.getElementById("food").value;
        var partySize= document.getElementById("partySize").value;
        var trip = ""
        if(is1day) trip ="1 day";
        if(is4day)+=", 4 days";
        if(is10day) += ", 10 days";
        sessionStorage.trip = trip;
        sessionStorage.firstname = firstname;
        sessionStorage.lastname = lastname;
        sessionStorage.age = age;
        sessionStorage.species = species;

        alert ("Trip storage: " + sessionStorage.trip); 
    }

答案 1 :(得分:0)

由于缺少数据源,您的问题不完整,但我会尽力猜测您的情况以帮助您。

我想您有一个包含一些字段的表格,它向用户显示出用必要的信息填充这些字段。对吗?,然后您需要从DOM获取用户输入。

<form>
     <label>First Name</label><br>
     <input type="text" id="firstName" size="30"> <br>

     <label>Last Name</label><br>
     <input type="text" id="lastName" size="30"> <br>

     <label>Age</label><br>
     <input type="text" id="age" size="30"> <br>

     <label>Species</label><br>
     <input type="text" id="species" size="30"> <br>

     <label>days</label><br>
     <input type="radio" name="days"  value="1 day"> one day <br>
     <input type="radio" name="days"  value="4 days"> four days <br>
     <input type="radio" name="days"  value="10 days"> ten days <br>

    <input type="button" value="save" onclick="storeBooking()"/>


</form> 

<script type="text/javascript">
  function storeBooking ()  {
        sessionStorage.trip=document.querySelector('input[name="days"]:checked').value;               
        sessionStorage.firstname = document.getElementById("firstName").value;
        sessionStorage.lastname = document.getElementById("lastName").value;
        sessionStorage.age = document.getElementById("firstName").value;
        sessionStorage.species = species;

        alert ("Trip storage: " + sessionStorage.trip); 
 }
</script>