Переместить изображение с помощью кнопки

Question

В настоящее время я работаю над проектом, который должен иметь изображение, которое перемещается в каждый угол экрана с помощью кнопок относительно каждого угла. Изображение начинается в верхнем левом углу (северо-запад), затем, нажав кнопку северо-восток, оно перемещается в верхний правый угол и т. Д. c. Кажется, я не могу заставить изображение двигаться, хотя я подтверждаю работу кнопок, помещая в них оповещения. Над изображением есть текст, который мне также нужно будет перемещать вместе с изображением, но я просто сосредоточен на том, чтобы заставить изображение двигаться в это время. Любая помощь будет оценена.

HTML:

JS:

function NWfunction(){
document.getElementById("MyImage").style.top="150px";
document.getElementById("MyImage").style.left="210px";
}

function NEfunction(){
document.getElementById("MyImage").style.top="150px";
document.getElementById("MyImage").style.left="1500px";
}

function SEfunction(){
document.getElementById("MyImage").style.top="1500px";
document.getElementById("MyImage").style.left="1500px";
}

function SWfunction(){
document.getElementById("MyImage").style.top="1500px";
document.getElementById("MyImage").style.left="210px";
}

Answer 1

Спасибо за направление. В конце концов я дошел до этого:

$(document).ready(function(){
    var img = $('#MyImage');
    $('#NWest').on('click',function(){
    img.css({top: '0px', left: '0px', position:'absolute'});
  });
});

$(document).ready(function(){
    var text = $('#MyText');
    $('#NWest').on('click',function(){
    text.css({top: '150px', left: '245px', position:'absolute'});
  });
});


$(document).ready(function(){
    var img = $('#MyImage');
    $('#NEast').on('click',function(){
    img.css({top: '0px', left: '75%', position:'absolute'});
  });
});

$(document).ready(function(){
    var text = $('#MyText');
    $('#NEast').on('click',function(){
    text.css({top: '150px', left: '88%', position:'absolute'});
  });
});


$(document).ready(function(){
    var img = $('#MyImage');
    $('#SEast').on('click',function(){
    img.css({top: '560px', left: '75%', position:'absolute'});
  });
});

$(document).ready(function(){
    var text = $('#MyText');
    $('#SEast').on('click',function(){
    text.css({top: '710px', left: '88%', position:'absolute'});
  });
});

$(document).ready(function(){
    var img = $('#MyImage');
    $('#SWest').on('click',function(){
    img.css({top: '560px', left: '0px', position:'absolute'});
  });
});

$(document).ready(function(){
    var text = $('#MyText');
    $('#SWest').on('click',function(){
    text.css({top: '710px', left: '245px', position:'absolute'});
  });
});

Что прекрасно работает. Но у меня нет никакого опыта в jquery, так как я все еще очень плохо знаком с html. Я понимаю, что jquery - это гораздо более современный способ сделать это, но как мне заставить мой оригинальный код работать. Я хочу понять это, прежде чем передать это.

Answer 2

Вот скрипка JS с рабочей версией: https://jsfiddle.net/dhr6wa2s/

$(document).ready(function(){
    var img = $('#image');
    $('#neast').on('click',function(){
    img.css('right','0');
  });
});

измените jQuery код, как вам нравится для других позиций.