DOMを用いて、style.positionを変化させたい

初心者のものです。
DOMを使って、divタグを動かそうとしています。
個人的には型変換がうまくいっていないのかと、いじっているのですが
うまくいきません。

どなたかご教授頂けないでしょうか。

lang
1対象タグ
2      <div class = "ball" id = "ball" style = "position:absolute">test</div>
3<script>
4  var ball = document.querySelector(".ball");
5
6  function go(){
7    ball.style.left += "100px";
8
9  setInterval("go()",100);
10</script>
11
12

行動規範の内容に同意します

回答1件

多分 += "100px"; ここの部分が問題かと。

JavaScript
1ball.style.left += "100px";
2// 2回目 "100px100px";
3// 3回目 "100px100px100px";
4// 4回目 "100px100px100px100px";
5// 5回目 "100px100px100px100px100px";
6// 実際は代入に失敗するので失敗する前の"100px"がball.style.leftには入っている

サンプルを置いときます。
https://jsfiddle.net/3qq66sfy/

HTML
1<style>
2.ball {
3	position: absolute;
4	/* 動きを解りやすくするために形を色を追加 */
5	width: 100px;
6	height: 50px;
7	background-color: red;
8}
9</style>
10
11<div class="ball">test</div>
12
13<script>
14	var ball = document.querySelector( '.ball' );
15	var pix = 0;
16	function go() {
17		pix += 100;
18		if ( pix > 700 ) pix = 0; // とりあえず稼動範囲を限定
19		ball.style.left = pix + 'px';
20	}
21	setInterval( go, 100 );
22</script>