stepUp() & stepDown()

[lurtnowski]

I have four buttons which either increment a variable by 1

    <button type="button" class="btn btn-outline-dark" onclick="decrementY()"><span class="icon-arrow-up"></span></button>
    <button type="button" class="btn btn-outline-dark" onclick="incrementX()"><span class="icon-arrow-right"></span></button>
    <button type="button" class="btn btn-outline-dark" onclick="incrementY()"><span class="icon-arrow-down"></span></button>
    <button type="button" class="btn btn-outline-dark" onclick="decrementX()"><span class="icon-arrow-left"></span></button>

So when the button is pressed, either the x or y value should be effected, the up and down arrowss workfine, but when I click the left/.right arrows I get

Here are the 4 functions

function incrementX() {
  document.getElementById("x_coord").stepUp(1);
  document.forms["Positions"].submit();
}
function decrementX() {
  document.getElementById("x_coord").stepDown(1);
  document.forms["Positions"].submit();
}
function incrementY() {
  document.getElementById("y_coord").stepUp(1);
  document.forms["Positions"].submit();
}
function decrementY() {
  document.getElementById("y_coord").stepDown(1);
  document.forms["Positions"].submit();
}

They all seem similar, so why the error?

Got it, my form element had 2 ids…

[m3g4p0p]

@lurtnowski

They all seem similar, so why the error?

Hi @lurtnowski, that probably means there is no element with the ID x_coord, so

document.getElementById("x_coord")

will return null.

[m_hutley]

as an aside: Rather than defining 4 distinct functions for this, consider if you might be able to define 1, which takes 2 parameters - a letter, and a number. (I don’t know if you have control of/have defined stepUp/stepDown yourself, though)