Changing attributes of a graphic (line)

[AmbientPower]

I'm struggling to understand how I can change the attributes of a line. I've got a very simple test program.

index.gui:
<svg class="background">
<line id="testline" x1="10" y1="10" x2="100" y2="100" fill="black" stroke-width="4"/>
</svg>

index.js:

import document from "document";

let testline = document.getElementById("testline");
var count = 0;

document.onkeypress = function(e)
{
  if(e.key=="up")
  {
    count++;
    console.log(count);
    switch(count)
    {
      case 1:
        testline.style.x1="20";
        break;
      case 2:
        testline.style.x1="100";
        count=0;
        break;
    }
  }
}

I'd just like to get the line to move, to give it different co-ordinates, this is the basis of an app that will draw simple diagrams.

Can anyone point me in the right direction please?

TIA

[a.lapinski · Accepted solution]

try 

testline.x1="20";

[AmbientPower]

Thanks, although I don't need the 20 in quotes. 🙂