Question

我正在尝试更改输入类型提交onclick的值。请让我知道我哪里出错了。

var elem = document.getElementsByClassName("main-add-to-cart");

$('.main-add-to-cart').on('click', function() {
  if (elem.value == "Add to cart") {
    elem.value = "New Changed text";
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="main-add-to-cart form-submit ajax-processed" type="submit" id="edit-submit--3346" name="op" value="Add to cart">

谢谢。

Answer 1

使用getElementsByClassName进行DOM选择会返回一个集合，因此它没有.value属性。

您可以使用.querySelector()选择该类的第一个元素。

var elem = document.querySelector(".main-add-to-cart");

但是，绑定元素在处理程序中通过this可用，因此您不需要变量。

if (this.value == "Add to cart") {
  this.value = "New Changed text";
}

总的来说，这是一个非jQuery解决方案。

var elem = document.querySelector(".main-add-to-cart");

elem.addEventListener('click', function() {
  if (this.value == "Add to cart") {
    this.value = "New Changed text";
  }
});

<input class="main-add-to-cart form-submit ajax-processed" type="submit" id="edit-submit--3346" name="op" value="Add to cart">

Answer 2

代码的主要问题是getElementsByClassName返回类似数组的结构，而不是单个值。

假设只有一个元素，您可以更正以下代码以使其正常工作：

＆＃13;

var elem = document.getElementsByClassName("main-add-to-cart")[0];

$('.main-add-to-cart').on('click', function() {
  if (elem.value == "Add to cart") {
    elem.value = "New Changed text";
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="main-add-to-cart form-submit ajax-processed" type="submit" id="edit-submit--3346" name="op" value="Add to cart">

＆＃13;

请注意，我已使用[0]从选择器的结果中获取第一个元素。如果您有多个元素，则需要遍历结果并检查您的条件。

Answer 3

你应该尝试一下它会起作用。

$(document).ready(function(){

$('#edit-submit--3346').click(function(){

    if($(this).val() == 'Add to cart')
        $(this).val('New Changed text');

    $('#form').submit();
})

Onclick更改属性值

3 个答案: