Javascript-форум - Помогите Пожалуйста

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Помогите Пожалуйста (https://javascript.ru/forum/dom-window/54195-pomogite-pozhalujjsta.html)

Помогите Пожалуйста

Разметка
<!doctype html>

<html lang="ru">
<head>
<script src="js/cast.js"></script>
<script src="js/jquery-2.1.3.min.js"></script>
<link href="cast.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="qwe">
<div class="quasactiv">
<a href="#"></a>
</div>
<div class="wexactiv">
<a href="#"></a>
</div>
<div class="exortactiv">
<a href="#"></a>
</div>
</div>
<div class="content">
<div class="shpargalka">
<p>подсказка</p>
</div>
</div>
<div class="cast">
<div id = "quas">
<a href="#"></a>
</div>

<div id = "wex">
<a href="#"></a>
</div>

<div id = "exort">
<a href="#"></a>
</div>

<div id = "invoke">
<a href="#"></a>
</div>

</div>
</body>

</html>

CSS

* {
margin:0;
padding:0;
}

.cast {

width: 100%;
position: relative;
text-align: center;

}
.cast div{
display: inline-block;
margin:0 10px 0 0;
}
.cast a {
text-decoration: none;
}
#quas {
border-radius:5px;
background-image: url(img/quas.png);
width: 128px;
height:128px;
border:5px solid #232523;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);

}
#wex {
border-radius:5px;
background-image: url(img/wex.png);
width: 128px;
height:128px;
border:5px solid #232523;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
}
#exort{
border-radius:5px;
background-image: url(img/exort.png);
width: 128px;
height:128px;
border:5px solid #232523;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
}
#invoke{
border-radius:5px;
background-image: url(img/invoke.png);
width: 128px;
height:128px;
border:5px solid #232523;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);

}
.content {
border-radius:5px;
background: url(img/invoker.jpg) no-repeat 50% 95%;
height: 272px;
margin: 30px auto;
border: 5px solid #232523;
width: 235px;

-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
}

#quas:active {
width: 125px;
height: 125px;
}
#wex:active {
width: 125px;
height: 125px;
}
#exort:active {
width: 125px;
height: 125px;
}

#invoke:active {
width: 125px;
height: 125px;
}
.wexactiv {
background:url(img/wexactiv.png)no-repeat;
width: 60px;
height: 60px;

}
.quasactiv {
background:url(img/quasactiv.png)no-repeat;
width: 60px;
height: 60px;
}
.exortactiv {
background:url(img/exortactiv.png)no-repeat;
width: 60px;
height: 60px;

}
.content p {
text-decoration: none;
color: #000;
transform: rotate(-45deg);
}
.content p:hover {
color:#fff;
}

JS

window.onload = function(){
var qwePosX = 0;
var qwePosY = 0;
var interval;
var n = 10; // На сколько двигать за раз
var width = document.documentElement.clientWidth; // Ширина экрана
var height = document.documentElement.clientHeight; // Высота экрана
var imgWidth = 60; // Ширина картинки
var imgHeight = 60; // Высота картинки
var wexactiv = document.getElementById("wexactiv");
function move() {
wexactiv.style.left = (qwePosX += n) + "px";
wexactiv.style.top = (qwePosY += n) + "px";
if ( (qwePosX == (width - imgWidth) ) || (qwePosY == (height - imgHeight) ) ) {
clearInterval(interval);
}
}
interval = setInterval(move, 1000);
}

Появляется ОШИБКА
Uncaught TypeError: Cannot read property 'style' of null
14cast.js:
14 Uncaught TypeError: Cannot read property 'style' of null

Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Ша подправлю

Далеко не уходите )

<html lang="ru">
<head>
<script src="js/cast.js"></script>
<script src="js/jquery-2.1.3.min.js"></script> 
<link href="cast.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="qwe">
<div class="quasactiv">
<a href="#"></a>
</div>
<div class="wexactiv">
<a href="#"></a>
</div>
<div class="exortactiv">
<a href="#"></a>
</div>
</div>
<div class="content">
<div class="shpargalka">
<p>подсказка</p>
</div>
</div>
<div class="cast">
<div id = "quas">
<a href="#"></a>
</div>

<div id = "wex">
<a href="#"></a>
</div>

<div id = "exort">
<a href="#"></a>
</div>

<div id = "invoke">
<a href="#"></a>
</div>

</div>
</body>

</html>

* {
margin:0;
padding:0;
}

.cast {

width: 100%;
position: relative;
text-align: center;

}
.cast div{
display: inline-block;
margin:0 10px 0 0;
}
.cast a {
text-decoration: none; 
}
#quas {
border-radius:5px;
background-image: url(img/quas.png);
width: 128px;
height:128px;
border:5px solid #232523;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);

}
#wex {
border-radius:5px; 
background-image: url(img/wex.png);
width: 128px;
height:128px;
border:5px solid #232523;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
}
#exort{
border-radius:5px; 
background-image: url(img/exort.png);
width: 128px;
height:128px;
border:5px solid #232523;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
}
#invoke{
border-radius:5px; 
background-image: url(img/invoke.png);
width: 128px;
height:128px;
border:5px solid #232523;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);

}
.content {
border-radius:5px;
background: url(img/invoker.jpg) no-repeat 50% 95%;
height: 272px;
margin: 30px auto;
border: 5px solid #232523;
width: 235px;

-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
}

#quas:active {
width: 125px;
height: 125px;
}
#wex:active {
width: 125px;
height: 125px;
}
#exort:active {
width: 125px;
height: 125px;
}

#invoke:active {
width: 125px;
height: 125px;
}
.wexactiv {
background:url(img/wexactiv.png)no-repeat;
width: 60px;
height: 60px;

}
.quasactiv {
background:url(img/quasactiv.png)no-repeat;
width: 60px;
height: 60px;
}
.exortactiv {
background:url(img/exortactiv.png)no-repeat;
width: 60px;
height: 60px;

}
.content p {
text-decoration: none;
color: #000;
transform: rotate(-45deg);
}
.content p:hover {
color:#fff; 
}

window.onload = function(){
var qwePosX = 0;
var qwePosY = 0;
var interval;
var n = 10; // На сколько двигать за раз
var width = document.documentElement.clientWidth; // Ширина экрана
var height = document.documentElement.clientHeight; // Высота экрана
var imgWidth = 60; // Ширина картинки
var imgHeight = 60; // Высота картинки
var wexactiv = document.getElementById("wexactiv");
function move() {
wexactiv.style.left = (qwePosX += n) + "px";
wexactiv.style.top = (qwePosY += n) + "px";
if ( (qwePosX == (width - imgWidth) ) || (qwePosY == (height - imgHeight) ) ) {
clearInterval(interval);
}
}
interval = setInterval(move, 1000);
}

Цитата:

Сообщение от ArsenInvoker

Цитата:

Сообщение от ArsenInvoker

document.getElementById("wexactiv");

:cray:

ArsenInvoker,
вместо

Цитата:

Сообщение от ArsenInvoker

var wexactiv = document.getElementById("wexactiv");

у вас должно быть

var wexactiv = document.querySelector(".wexactiv");

остальные способы смотрите тут
http://learn.javascript.ru/searching-elements-dom

спасибо огромное разобрался еще один вопрос как назначить клавишу на ссылку только плиз прошу не на jquery

Цитата:

Сообщение от ArsenInvoker

назначить клавишу на ссылку

ну например свойство keypress назначит клавишу на ссылку на пример или на кнопку