Question

This is very strange to me:

document.getElementById('orderNumber')

returns <button class="popup" id="orderNumber">order Number</button>

document.getElementById('orderNumber').value

returns ”

all the operation is after dom fully loaded and after I input the type,

Answer 1

If you want the value of the element, that element has to have a value attribute set:

<button class="popup" id="orderNumber" value="this is the value">order Number</button>

The value being retrieved by:

var value = document.getElementById('orderNumber').value;

or if you want the text of the element, try retrieving the textContent (or innerText):

var ordernumberEl = documet.getElementById('orderNumber'),
    text = orderNumberEl.textContent || orderNumberEl.innerText;

A general JS Fiddle proof of concept.