Question

我尝试自己做一点练习，将Jon Duckett的JavaScript和JQuery书籍的元素与Treehouse的JavaScript Basics轨道相结合。基本上，该程序允许某人输入文本，并查看使用该文本制作标志需要多少费用。

当我尝试从input元素复制文本并将其放在自定义符号旁边时，我的input.value返回零。任何帮助都会非常感激，想出这个

＆＃13;

var btnCalc = document.getElementById('myButton');
// Here's where I have the issue
var textInput = document.getElementById('textInput').value;

var customSign = document.getElementById('customSign');
var totalTiles = textInput.length;
var subtotal = totalTiles * 5;
var shipping = 7;
var grandTotal = subtotal + shipping;

btnCalc.addEventListener('click', Calculate);

function Calculate() {

    // and here
    document.getElementById('customSign').innerHTML = textInput;

    document.getElementById('totalTiles').textContent = totalTiles;

    document.getElementById('subtotal').textContent = subtotal;

    document.getElementById('shipping').textContent = shipping;

    document.getElementById('grandTotal').textContent = grandTotal;
}

＆＃13;

h2 {
  text-align: center;
}

span {
  font-weight: bold;
}

div {
  margin: 0 auto;
  width: 400px;
  overflow: auto;
}

ul {
  list-style-type: none;
}

#right-col {
  float: right;
}

#left-col {
  float:left;
}

#input-form {
    text-align: center;
}

＆＃13;

<html>
    <head>
        <title>Duckett Chapter 2 Example</title>
        <link href="styles.css" rel="stylesheet "type="text/css" >
    </head>
    <body>
        <h2 id="greeting">Howdy Molly, please check your order: </h2>
        <div>
          <ul id="left-col">
            <li><span>Custom Sign: </span> </li>
            <li><span>Total Tiles: </span></li>
            <li><span>Subtotal: </span></li>
            <li><span>Shipping: </span></li>
            <li><span>Grand Total: </span></li>
          </ul>
          <ul id="right-col">
            <li id="customSign">Montague Hotel</li>
            <li id="totalTiles">14</li>
            <li id="subtotal">$70</li>
            <li id="shipping">$7</li>
            <li id="grandTotal">$77</li>
          </ul>
            <div id="input-form">
                <input id="textInput" type="text">
                <button id="myButton">Calculate</button>  
            </div>  
        </div>
    <script src="scripts.js"></script>
    </body>
</html>

＆＃13;

Answer 1

您的变量必须在您的函数内部，否则在调用它们时它们的值已经为空。

var btnCalc = document.getElementById（＆＃39; myButton＆＃39;）; btnCalc.addEventListener（＆＃39;点击＆＃39;，计算）;

function Calculate() {
  var textInput = document.getElementById('textInput').value;
  var customSign = document.getElementById('customSign');
  var totalTiles = textInput.length;
  var subtotal = totalTiles * 5;
  var shipping = 7;
  var grandTotal = subtotal + shipping;

  document.getElementById('customSign').innerHTML = textInput;
  document.getElementById('totalTiles').textContent = totalTiles;
  document.getElementById('subtotal').textContent = subtotal;
  document.getElementById('shipping').textContent = shipping;
  document.getElementById('grandTotal').textContent = grandTotal;
}

Answer 2

将计算部分移动到该功能。

＆＃13;

mdfind

＆＃13;

var btnCalc = document.getElementById('myButton');
// Here's where I have the issue
var textInput = document.getElementById('textInput');
var customSign = document.getElementById('customSign');

btnCalc.addEventListener('click', Calculate);

function Calculate() {
    var totalTiles = textInput.value.length;
    var subtotal = totalTiles * 5;
    var shipping = 7;
    var grandTotal = subtotal + shipping;

    // and here
    document.getElementById('customSign').innerHTML = textInput.value;

    document.getElementById('totalTiles').textContent = totalTiles;

    document.getElementById('subtotal').textContent = subtotal;

    document.getElementById('shipping').textContent = shipping;

    document.getElementById('grandTotal').textContent = grandTotal;
}

＆＃13;

h2 {
  text-align: center;
}

span {
  font-weight: bold;
}

div {
  margin: 0 auto;
  width: 400px;
  overflow: auto;
}

ul {
  list-style-type: none;
}

#right-col {
  float: right;
}

#left-col {
  float:left;
}

#input-form {
    text-align: center;
}

＆＃13;

输入返回零

2 个答案: