Wie führe ich meine JavaScript-Funktion in Javascript

-3

Hier ist mein Code, der ein Bild nach rechts bewegt. Ich habe gesucht, wie man Funktionen aufruft und ausführt, aber ich verstehe sie nicht.Wie führe ich meine JavaScript-Funktion in Javascript

Ich weiß, wie man es in HTML, aber nicht in Javascript ausführt. Ich möchte es ausführen, wenn ich die Seite die ganze Zeit lade.

Ich habe diesen Code gesehen, aber ich kann es nicht mit meinem Code arbeiten.

window["functionName"](arguments);

wie das, was ich in den Klammern zum Beispiel schreiben soll.

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

Quelle

2017-05-16 William Svens

Das erste, was Sie tun wollen, ist Ihr 'zu überprüfen;' Semikolons ein Problem nicht verursachen. Sie sind nicht erforderlich. https://www.w3schools.com/jsref/event_onclick.asp – Nol

@Nol - Sie verursachen definitiv kein Problem. Es empfiehlt sich, jede Aussage mit einem Semikolon zu beenden und sich nicht auf ASI zu verlassen. – Quentin

Ich bin sowohl dumm als auch müde. Nahm eine halbe Sekunde länger um es zu betrachten und erkannte, dass ich das nicht sagen musste. Scheint wie das OP-Problem ist, dass sie nicht ihre Init machen, die das imgObj leer lassen muss. – Nol

Eine leichte Erweiterung @ oben Emil Antwort, so dass der Code so schnell ausgeführt wird als Seite geladen wird.

Mit setInterval() und bietet moveRight() als function Parameter und 200 als delay halten Ihre Funktion alle 200 Millisekunden aufrufen. Sie können auch clearInterval() verwenden, um den Timer abzubrechen.

Sie können dies weiter auf prevent image from going off-screen erweitern (wenn dies eine Voraussetzung ist).

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>

Quelle

2017-05-16 14:51:22 Sandman

Ja danke, das war genau das, was ich wollte. –

Nur "moveRight(); sollte die Arbeit machen. Sie müssen keine Tricks mit window tun, weil Sie keine Variable verwenden, um den Funktionsnamen zu halten.

Quelle

2017-05-16 14:20:25 Quentin

Ich schreibe 'moveRight();' in das Skript, aber wenn ich die Seite starte passiert nichts und meine Buttons funktionieren auch nicht und wenn ich 'moveRight();' lösche, dann funktionieren die Buttons wieder. –

Siehe auch: http://stackoverflow.com/questions/14028959/why-does-jquery-or-ddom-method-such-as-geelementbyid-not-find-the-element – Quentin

Ich bekomme dies von der Konsole wenn ich versuche, moveRight() auszuführen; Uncaught Typeerror: bei tset.html: Can not Eigenschaft 'Stil' von null bei MoveRight- (36 tset.html): lesen 52 MoveRight- @ tset.html: 36 (anonym) @ tset.html: 52 –

-1

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

Quelle

2017-05-16 14:26:12

will ich nicht Um Schaltflächen zu verwenden, möchte ich, dass der Code automatisch ausgeführt wird, und ich möchte die Funktion in JavaScript ausführen, wenn ich die Seite hochlade. –

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.

Der Code innerhalb der Funktion wird ausgeführt, wenn "etwas" aufruft (Anrufe) die Funktion:

Wenn ein Ereignis eintritt (wenn ein Benutzer auf eine Schaltfläche klickt)>elem.onclick=functionname()
Wenn es aufgerufen wird, (genannt) von JavaScript-Code>functionname()
automatisch (selbst aufgerufen)>function(){}()

Die setInterval() Methode ruft eine Funktion oder wertet einen Ausdruck in bestimmten Abständen (in Millisekunden).

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>

Quelle

2017-05-16 15:08:18 AvrilAlejandro

Wie führe ich meine JavaScript-Funktion in Javascript

Antwort

Verwandte Themen