如何在javascript中執行javascript函數

-3

這是我的代碼，它使圖像向右移動。我搜索瞭如何調用和執行函數，但我不明白它們。如何在javascript中執行javascript函數

我知道如何在HTML中執行它，但不是在JavaScript中執行它。我想在我一直加載頁面時執行它。

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

我已經看過這段代碼，但是我無法讓它與我的代碼一起工作。

window["functionName"](arguments);

就像我應該寫在括號中的例子。

<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>

來源

2017-05-16 William Svens

你想要做的第一件事就是驗證你的'，'分號不會導致的問題。他們不是必需的。 https://www.w3schools.com/jsref/event_onclick.asp – Nol

@Nol - 他們肯定不會造成問題。最佳做法是用分號結束每條語句，而不要依賴ASI。 – Quentin

我既啞又累。花了半秒鐘的時間看它，並意識到我不需要這麼說。似乎OP的問題是，他們沒有做他們的Init，必須將imgObj留空。 – Nol

略有擴展@周華健的回答以上，這樣的代碼將盡快頁面加載執行。

使用setInterval()，提供moveRight()爲function參數和200爲delay將保持調用你的函數每200毫秒。您也可以使用clearInterval()來取消定時器。

您可能需要進一步擴展到prevent image from going off-screen（如果這是要求）。

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>

來源

2017-05-16 14:51:22 Sandman

是的，謝謝你，那正是我想要的。 –

只是"moveRight();應該做的工作。您不需要使用window做任何技巧，因爲您沒有使用變量來保存函數名稱。

來源

2017-05-16 14:20:25 Quentin

我在腳本里寫'moveRight（）;'，但是當我啓動頁面時什麼都沒有發生，我的按鈕也不工作，當我刪除moveRight（）;'然後按鈕開始再次工作。 –

另請參閱：http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element – Quentin

我從控制檯得到這個當我嘗試運行moveRight（）; 遺漏的類型錯誤：在tset.html：52 MoveRight的@ tset.html：在MoveRight的（36 tset.html）不能看空的特性 '風格' 36 （匿名）@ tset.html：52 –

-1

嘗試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>

來源

2017-05-16 14:26:12

我不想要要使用按鈕，我希望代碼自動運行，並且我希望在加載頁面時在JavaScript中執行該函數。 –

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.

功能中的代碼將執行時「東西」所調用（呼叫）的功能：

當事件發生時（當用戶點擊一個按鈕時）>elem.onclick=functionname()
當被調用（被呼叫）從JavaScript代碼>functionname()
自動（個體調用）>function(){}()

的setInterval()方法調用的函數或在指定的時間間隔計算表達式（以毫秒爲單位）。

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>

來源

2017-05-16 15:08:18 AvrilAlejandro

如何在javascript中執行javascript函數

回答

相關問題