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

Question

我正在尝试使用javascript将参数设置为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 =应该是来自id='year'和name='year'的html select元素的值

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

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

这些是html select options

<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或jquery在函数uploadFileIGCSE('param1', 'param2', 'param3')设置参数值（param1，param2，param3）

谢谢

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> 

Answer 2

你真的不应该使用像onclick这样的内联事件监听器（出于可维护性，安全性和关注点分离的原因）。

相反，使用DOM API的HTMLElement.prototype.addEventListener()添加侦听器：

document.getElementById('upload-button').addEventListener('click', function() {
  uploadFileIGCSE(year.value, grade.value, subject.value);
})

 function uploadFileIGCSE(x,y,z) { console.log(x,y,z); } document.getElementById('upload-button').addEventListener('click', function() { uploadFileIGCSE(year.value, grade.value, subject.value); }) 

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

Answer 3

尝试这个

<button type="button" id="upload-button" onclick="getOption()" class="btn btn-success"
    aria-expanded="false">Upload</button>

function getOption() {
    var year = document.getElementById("year");
    var year_option = year.options[year.selectedIndex].value;

    var grade = document.getElementById("grade");
    var grade_option = grade.options[grade.selectedIndex].value;

    var subject = document.getElementById("subject");
    var subject_option = subject.options[subject.selectedIndex].value;

    uploadFileIGCSE(year_option, grade_option, subject_option)
}

Answer 4

click事件可以简单地运行匿名函数。 它唯一的输入将是DOM引擎提供的默认event对象。 然后，该函数可以从您感兴趣的各种元素中收集值，并进一步调用uploadFileIGCSE函数，将这些值作为参数传递。

这是一个演示。 请注意，我用一个不显眼的使用事件处理程序的addEventListener（）的JS代码，而不是“onclick”事件在HTML中。 这通常被认为是更好的实践，因为它使代码更易于阅读，维护和调试，并有助于将功能与表示分开。

注意，您可以将jQuery用于任何/所有这些，但同样不是必需的，它在这种情况下并没有真正增加很多价值。

 var button = document.getElementById("upload-button"); button.addEventListener("click", function(event) { var year = document.getElementById("year").value; var grade = document.getElementById("grade").value; var subject = document.getElementById("subject").value; uploadFileIGCSE(year, grade, subject); }); function uploadFileIGCSE(year, grade, subject) { console.log(year, grade, subject); } 

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

Answer 5

$('#upload-button').click(function(e) {
    var year = $('#year').val();
    var grade = $('#grade').val();
    var subject = $('#subject').val();

    uploadFileIGCSE(year, grade, subject);
})

你可以尝试这样的事情。