How to execute my javascript function in javascript

Question

Here is my code that makes an image move to the right. I have searched how to call and execute functions but I don't understand they.

I know how to execute it in HTML but not in javascript. I want to execute it when I load the page all the time.

<input type="button" value="Start" onclick="moveRight();" />

I have seen this code but I can't get it to work with my code.

window["functionName"](arguments);

like what I'm supposed to write in the brackets for example.

<script>
        var imgObj = null;
        var animate ;

        function init(){
           imgObj = document.getElementById('myImage');
           imgObj.style.position= 'relative'; 
           imgObj.style.left = '0px'; 
        }

        function moveRight(){
           imgObj.style.left = parseInt(imgObj.style.left) + 11 + 'px';
           animate = setTimeout(moveRight,22); // call moveRight in 20msec
        }

<body>

  <form>
     <img id="myImage" src="myimage.jpg" />
     <p>Click the buttons below to handle animation</p>
     <input type="button" value="Start" onclick="moveRight();" />
      <input type="button" value="Start" onclick="moveLeft();" />
     <input type="button" value="Stop" onclick="stop();" />
  </form>

The first thing you want to do is verify your `;` semicolons aren't causing an issue. They are not required. https://www.w3schools.com/jsref/event_onclick.asp — Nol, May 16 '17 at 14:19
@Nol — They definitely are not causing an issue. Best practise is to end each statement with a semi-colon and not rely on ASI. — Quentin, May 16 '17 at 14:20
I'm both dumb and tired. Took a half second longer to look at it and realized I didn't need to say that. Seems like the OP problem is that they aren't doing their Init which must be leaving the imgObj empty. — Nol, May 16 '17 at 14:24

score 0 · Answer 1 · answered May 16 '17 at 14:20

0

Just "moveRight(); should do the job. You don't need to do any tricks with window because you aren't using a variable to hold the function name.

answered May 16 '17 at 14:20

Quentin

800,325
104
1,079
1,205

Im writing `moveRight();` in the script but when I start the page nothing happens and my buttons don't work either and when I remove `moveRight();` then the buttons start to work again. – William Svens May 16 '17 at 14:28
See also: http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element – Quentin May 16 '17 at 14:30
I get this from the console when I try to run moveRight(); Uncaught TypeError: Cannot read property 'style' of null at moveRight (tset.html:36) at tset.html:52 moveRight @ tset.html:36 (anonymous) @ tset.html:52 – William Svens May 16 '17 at 14:37
Yes, as I said, see http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element – Quentin May 16 '17 at 14:39

score 0 · Accepted Answer · edited May 23 '17 at 10:31

A slight extension to @Emil's answer above so that the code will execute as soon as page is loaded.

Using setInterval(), providing moveRight() as the function parameter and 200 as the delay will keep calling your function every 200 milliseconds. You can also use clearInterval() to cancel the timer.

You may want to extend this further to prevent image from going off-screen (if this is a requirement).

var img = document.getElementById("myImage"); 
var imgLeft = 0;
var imgTop = 0;
img.style.position = "absolute";

function render() {
  img.style.left = imgLeft + "px";
  img.style.top = imgTop + "px";
}

function moveRight() {
  console.log(img.style.left);
  imgLeft += 10;
  render();
}
var interval = setInterval(moveRight, 200);

<form>
  <img id="myImage" src="myimage.jpg" />      
</form>

score 0 · Answer 3 · answered May 16 '17 at 15:08

window.onload: Execute a JavaScript immediately after a page has been loaded, You can also put a script tag after an element inside body and it will be executed when the page has loaded.

The code inside the function will execute when "something" invokes (calls) the function:

When an event occurs (when a user clicks a button) > elem.onclick=functionname()
When it is invoked (called) from JavaScript code > functionname()
Automatically (self invoked) > function(){}()

The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds).

   window.onload = function(){
  var imgObj = document.getElementById('myImage');
  imgObj.style.position= 'relative'; 
  imgObj.style.left = '0px';
  function moveRight(){
    imgObj.style.left = parseInt(imgObj.style.left) + 11 + 'px';
  }
  var animate = setInterval(moveRight,222); // call moveRight in 20msec
  document.getElementById('stop').addEventListener("click", function(){
    clearInterval(animate);
  });
}

<form>
   <img id="myImage" src="myimage.jpg" />
   <input type="button" value="Stop" id="stop"/>
</form>

score -1 · Answer 4 · answered May 16 '17 at 14:26

Try position: absolute.

var img = document.getElementById("myImage");
var imgLeft = 0;
var imgTop = 0;
img.style.position = "absolute";

function render() {
  img.style.left = imgLeft + "px";
  img.style.top = imgTop + "px";
}

function move(x, y) {
  if (x === void 0) {
    x = imgLeft;
  }
  if (y === void 0) {
    y = imgTop;
  }
  imgLeft += x;
  imgTop += y;
  console.log(imgLeft, imgTop);
  render();
}
render();

<form>
  <img id="myImage" src="myimage.jpg" />
  <p>Click the buttons below to handle animation</p>
  <input type="button" value="right" onclick="move(10,0);" />
  <input type="button" value="left" onclick="move(-10,0);" />
  <input type="button" value="up" onclick="move(0,-10);" />
  <input type="button" value="down" onclick="move(0,10);" />
</form>

I don't want to use buttons, I want the code to run automatically and I want to execute the function in javascript when I load up the page. — William Svens, May 16 '17 at 14:31

How to execute my javascript function in javascript

4 Answers4