Count down from user entered number in HTML and Javascript

Question

So i have an input box that a user can enter a number into and upon clicking Commit, that number displays in a

tag.

I then want this number to start counting down when I click Start.

I am new to Javascript and this is essentially a little project to help me learn, maybe I've thrown myself in too far, but I'm too invested now and would appreciate any help.

My 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>

and my current Javascript to get the user value into the

tag (and a rough guess going from multiple searches on google of how to start the countdown)

<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>

At the moment it's erroring and saying that textContent can't be NULL.

Also just to point out the Actual populating of the P tag is working, its the countdown that isn't.

For `input` you want to use `.value`. – deEr. May 17 '18 at 12:04 — deEr., May 17 '18 at 12:04

score 3 · Answer 1 · answered May 17 '18 at 12:03

3

textContent property represents the text between opening and closing tags of an element. With your input, you need value property, because you don't have any text between those tags.

More info: How do I get the value of text input field using JavaScript?

answered May 17 '18 at 12:03

Mladen B.

2,784
2
23
34

2

Also since you are using jquery already just rewrite `document.getElementById("#inputvalue").textContent = $startingprice;` into `$("#inputvalue").val($startingprice);` – Domenik Reitzner May 17 '18 at 12:11
Thanks for the answer, and also the comment on the answer! – Luke Litherland May 17 '18 at 12:22

Christopher King · Answer 2 · 2018-05-17T15:43:37.023

You have a couple of issues in your code. First, as noted by Mladen, you should be using .value instead of .textContent. Second, you should not use the "#" in the .getElementById selector.

This should fix it for you.

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);
}

By the way, I highly recommend not jumping back and forth between jQuery and vanilla JS DOM selectors to avoid this kind of confusion.

Edit:

Commented out the line targeting the text input and added a line targeting the <p> tag. Note that instead of .value, you will need to use .innerHTML to make the change to the <p> tag (because it is updating the HTML contained within the opening and classing brackets of the <p>).

So this is working thank you, i have just noticed though that the number in the input box is counting down and not the number that is now in the P tag. A pastebin here so you can see what i trying to achieve here: https://pastebin.com/21ctir2n — Luke Litherland, May 17 '18 at 12:35

score 1 · Accepted Answer · edited May 17 '18 at 13:59

I have implemented your requirement in a fiddle, you can check

  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);
}

<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>

jsfiddle link

This is brilliant, thank you for taking the time to do this, i'll take a look, break it down and make sure i understand how you did it :) — Luke Litherland, May 17 '18 at 12:43

Count down from user entered number in HTML and Javascript

3 Answers3