Question

所以我有一个输入框，用户可以输入一个数字，点击提交时，该数字显示在

标签中。

然后，当我点击“开始”时，我希望此号码开始倒计时。

我是Javascript的新手，这本质上是一个帮助我学习的小项目，也许我已经把自己扔得太远，但我现在投入太多，并且会感激任何帮助。

我的HTML：

<span style="font-size: 36pt; font-family: homiziothin; color: black; padding-right: 20px;">&pound;</span>
<input id="inputvalue" type="number" name="Value" min="0" max="500">
<button id="commitprice" type="submit" onclick="submitPrice()">Commit Price</button>
<p id="submittedprice"></p>
<button id="startauction" type="submit" onclick="startAuction()">Start Auction</button>

和我目前使用Javascript将用户价值转换为

标签（以及谷歌如何开始倒计时的多次搜索的粗略猜测）

<script type="text/javascript">

    function submitPrice()
    {
        var $pricesubmitted = $("#inputvalue").val();

        $("#submittedprice").text($pricesubmitted);
    }
    function startAuction()
    {
        debugger;
        var $startingprice = $("#inputvalue").val();

        var $bidcountdown = setInterval(function()
        {
            $startingprice--;
            document.getElementById("#inputvalue").textContent = $startingprice;
            if($startingprice <= 0)
                clearInterval($bidcountdown);
        }, 1000);
    }
</script>

目前它出错并说textContent不能为NULL。

还要指出P标签的实际填充是否正常，倒计时是不是

Answer 1

textContent属性表示元素的开始标记和结束标记之间的文本。使用input，您需要value属性，因为这些代码之间没有任何文字。

更多信息：How do I get the value of text input field using JavaScript?

Answer 2

您的代码中存在一些问题。首先，正如Mladen所指出的，你应该使用.value而不是.textContent。其次，你不应该在.getElementById选择器中使用“＃”。

这应该为你解决。

function startAuction()
{
    debugger;
    var $startingprice = document.getElementById("inputvalue").value;

    var $bidcountdown = setInterval(function()
    {
        $startingprice--;
        // document.getElementById("inputvalue").value = $startingprice;
        document.getElementById("submittedprice").innerHTML= $startingprice;
        if($startingprice <= 0)
            clearInterval($bidcountdown);
    }, 1000);
}

顺便说一下，我强烈建议不要在jQuery和vanilla JS DOM选择器之间来回跳转，以避免这种混淆。

修改

注明了定位文字输入的行，并添加了一个定位<p>标记的行。请注意，代替.value，您需要使用.innerHTML对<p>标记进行更改（因为它正在更新{{1}的开头和分类括号中包含的HTML 1}}）。

Answer 3

我已经在小提琴中实现了你的要求，你可以检查

＆＃13;

  function submitPrice() {
    var $pricesubmitted = document.getElementById("inputvalue");
    document.getElementById("submittedprice").innerText = $pricesubmitted.value;
  }

function startAuction() {
  var msgElement = document.getElementById("showMessage");
  msgElement.innerText = "Count Down Started..";
  var _el = document.getElementById("inputvalue");
  var $startingprice = parseInt(_el.value);
  var $bidcountdown = setInterval(function() {
    msgElement.innerText = "Count Value " + $startingprice;
    $startingprice--;
    msgElement.innerText = $startingprice;
    if ($startingprice < 0) {
      msgElement.innerText = "Count Down ends ...";
      clearInterval($bidcountdown);
    }
  }, 1000);
}

＆＃13;

<span style="font-size: 36pt; font-family: homiziothin; color: black; padding-right: 20px;">&pound;</span>

<input id="inputvalue" type="number" name="Value" min="0" max="500" value="">

<button id="commitprice" onclick="submitPrice()">Commit Price</button>

<p id="submittedprice"></p>

<button id="startauction" type="button" onclick="startAuction()">Start Auction</button>

<div id="showMessage"></div>

＆＃13;

jsfiddle link

从用户在HTML和Javascript中输入的数字倒计时

3 个答案: