javascript - 如何使用 javascript 或 jquery 将参数值设置为 "onClick"函数

Question

我正在尝试使用 javascript 将 parameters 设置为 html button 中的 onClick 事件。

这是 html 按钮的样子:

<button type="button" id="upload-button" onclick="uploadFileIGCSE('param1', 'param2', 'param3')" class="btn btn-success" aria-expanded="false">Upload</button>

param1 = 应该是来自 html select 元素的值，带有 id='year' 和 name='year'

param2 = 应该是来自 html select 元素的值，带有 id='grade' 和 name='grade'

param3 = 应该是来自 html select 元素的值，带有 id='subject' 和 name='subject'

这些是 html 选择选项

<div class="col-md-3">
    <select id="year" name="year" class="form-control">
        <option value="select" disabled="disabled">- Select Year -</option>
        <option value="1">2001</option>
        <option value="2">2002</option>
        <option value="3">2003</option>
    </select>
</div>

<div class="col-md-3">
    <select id="grade" name="grade" class="form-control">
        <option value="select" disabled="disabled">- Select Grade -</option>
        <option value="1">Grade 5</option>
        <option value="2">Grade 6</option>
        <option value="3">Grade 7</option>
    </select>
</div>

<div class="col-md-3">
    <select id="subject" name="subject" class="form-control">
        <option value="select" disabled="disabled">- Select Subject -</option>
        <option value="1">Edexcel</option>
        <option value="2">National</option>
        <option value="3">Other</option>
    </select>
</div>

我不知道如何将值设置为 param1、param2、param3

这是我试过的，但感觉不对。

$('#upload-button').val = $('#year').val;

有人可以帮帮我吗？

我需要使用 javascript 在函数 uploadFileIGCSE('param1', 'param2', 'param3') 中设置参数值(param1、param2、param3) 或 jquery

谢谢

Answer 1

我能理解你的需求。如果你真的只想用 HTML 元素来做这件事，这里是方法。

<button type="button" id="upload-button" 
    onclick="uploadFileIGCSE(
             document.querySelector('#year').value, 
             document.querySelector('#grade').value, 
             document.querySelector('#subject').value)" 
    class="btn btn-success" aria-expanded="false">Upload</button>

这是工作示例

function uploadFileIGCSE(val1, val2, val3){
  document.querySelector('#log').innerHTML = `${val1}, ${val2}, ${val3}`
}

<div class="col-md-3">
    <select id="year" name="year" class="form-control">
        <option value="select" disabled="disabled">- Select Year -</option>
        <option value="1">2001</option>
        <option value="2">2002</option>
        <option value="3">2003</option>
    </select>
</div>

<div class="col-md-3">
    <select id="grade" name="grade" class="form-control">
        <option value="select" disabled="disabled">- Select Grade -</option>
        <option value="1">Grade 5</option>
        <option value="2">Grade 6</option>
        <option value="3">Grade 7</option>
    </select>
</div>

<div class="col-md-3">
    <select id="subject" name="subject" class="form-control">
        <option value="select" disabled="disabled">- Select Subject -</option>
        <option value="1">Edexcel</option>
        <option value="2">National</option>
        <option value="3">Other</option>
    </select>
</div>

<button type="button" id="upload-button" 
        onclick="uploadFileIGCSE(
                 document.querySelector('#year').value, 
                 document.querySelector('#grade').value, 
                 document.querySelector('#subject').value)" 
        class="btn btn-success" aria-expanded="false">Upload</button>
        
<p>log value : (<span id="log"></span>)</p>