返回未定义的值

时间:2018-01-22 18:40:14

标签: javascript jquery html

我有一个简单的Stripe表单,它现在只包含一些随机值,我试图抓住该值,但是当我将它放在console.log时,它会返回一个未定义的值,尽管那里有一个。我尝试了几种解决方案,但它们根本无法工作。我试图抓住“工作”的文本。任何人都知道最近会发生什么?

HTML - 头

<head>
  <script src="https://js.stripe.com/v3/"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js">
  </script>
</head>

HTML - 表单

<body>

<h3 id="work" value="400">500</h3>

<form action="/charge" method="post" id="payment-form">
  <div class="form-row">

    <label for="card-element">
      Credit or debit card
    </label>

    <div id="card-element">
      <!-- a Stripe Element will be inserted here. -->
    </div>

    <!-- Used to display form errors -->
    <div id="card-errors"></div>
  </div>
  <button>Submit Payment</button>
</form>
</body>

它也位于我的一个HTML文件中,格式为:

var card = elements.create('card', {style: style});

card.mount('#card-element');

card.addEventListener('change', function(event) {
  ...
});

// Handle form submission
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
  ...
});

function stripeTokenHandler(token) {

  var form = document.getElementById('payment-form');
  var hiddenInput = document.createElement('input');
  var totalAmount = document.createElement('input');

  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'stripeToken');
  hiddenInput.setAttribute('value', token.id);

  totalAmount.setAttribute('type', 'hidden');
  totalAmount.setAttribute('name', 'totalAmount');
  totalAmount.setAttribute('value', $('#work').innerHTML); //<-- Trying to get the value here

  form.appendChild(hiddenInput);
  form.appendChild(totalAmount);
  console.log(totalAmount);

  var formData = JSON.stringify({
    mytoken: token.id,
    totalAmount: totalAmount.value
  });

  console.log(formData); //<-- showing that it's undefined

  $.ajax({
    ...
  });

  // form.submit();
}
</script>

结果

enter image description here

2 个答案:

答案 0 :(得分:2)

您必须使用.text()方法,因为您使用的是jquery $选择器:

$('#work').text()

在原生javascript中:

document.getElementById('work').innerText

答案 1 :(得分:2)

改变这个:

$('#work').innerHTML

对此:

$('#work').html()

如果要从JQuery对象使用innerHTML,可以使用以下命令:

$('#work')[0].innerHTML

或纯Javascript

document.getElementById('work').innerHTML

希望有所帮助!