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 назначит клавишу на ссылку на пример или на кнопку

очень нужен пример в инете обшарил ничего подобного глухо

ArsenInvoker,
непонятно что вы ищите, может это
http://learn.javascript.ru/keyboard-events

Да но как это риализовать

на пример если я нажму одну из кнопок(то есть выбранную клавишу) то выполниться определенное действие на пример alert
как можно это сделать

рони,
на пример если я нажму одну из кнопок(то есть выбранную клавишу) то выполниться определенное действие на пример alert
как можно это сделать

ArsenInvoker, кликните по странице потом нажмите Esc

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <script>
  document.onkeydown = function(a) {
    27 == a.keyCode && alert("\u0427\u0438\u0442\u0430\u0439\u0442\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e")
};
  </script>
</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Idemne, quod iucunde?</b> <mark>Non semper, inquam;</mark> Nihilo beatiorem esse Metellum quam Regulum. Ita similis erit ei finis boni, atque antea fuerat, neque idem tamen; </p>
</body>

</html>

рони,
("\u0427\u0438\u0442\u0430\u0439\u0442\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u 0430\u0446\u0438\u044e")

а что это значит ?

рони,
Alert то понятно но что это в скобках

рони,
большое человеческое спасиб
рони,

у меня еще вопросы будут можно в личку

рони,
Блин у меня не получается сделать чтоб кнопка тоже кликалась

$(window).load(function () {

document.onkeydown =  function(invoke) {
82 == invoke.keyCode && $("#invoke").clickInvoke();
 
 

 }
});

рони,
Блин у меня не полается заставить кликнуть
в чем проблема

$(window).load(function () {

document.onkeydown =  function(invoke) {
82 == invoke.keyCode && $("#invoke").clickInvoke();
 
 

 }
});

<!doctype html>

<html lang="ru">
<head>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script> 
<script type="text/javascript" src="js/cast.js"></script>
<script type="text/javascript" src="js/shporgalka.js"></script>
<link href="cast.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    
<div class="invoker">
</div>
        <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">
       
            <p><a href="#" class="shtorka">подсказка</a></p>
        
    </div>
    <div class="platforma">

    </div>
    <div class="shpargalka">
    </div>
    <div class="cast">
        <div id="quas" onclick="clickQuas()" onkeyup="keyQuas">
            <input id="btn-quas" type="submit" value="Q">
        </div>
 
        <div id="wex" onclick="clickWex()">
            <input id="btn-wex" type="submit" value="W">
        </div>

        <div id="exort" onclick="clickExort()">
            <input id="btn-exort" type="submit" value="E">
        </div>

        <div id="invoke" onclick="clickInvoke()">
            <input id="btn-invoke" type="submit" value="R">
        </div>

    </div> 
    <div class="platforma2">
    </div> 
</html>

рони,
у меня вроде получилось но визуального эфекта нажатия кнопки нету
вот так получилось а как задать + к этому activ

$(window).load(function () {
document.onkeydown =  function(invoke) {
if(82 === invoke.keyCode) {
$("#btn-invoke:submit").click(); 
}
}
});

рони,
АА ура понял как задать псевдо селектор activ чтоб нажатии на кнопку было визуальное нажатие