不使用JQuery通过带有math.random的单选按钮移动div

Question

I'm relatively new to JavaScript and have been reading up on it. 我对JavaScript比较陌生，并且一直在阅读它。 I don't know JQuery yet and plan to do that next. 我尚不了解JQuery，并计划下一步进行。 I'm trying to probably figure something thats simple out. 我正在尝试找出简单的东西。

What I want to do is - I have 3 radio buttons, I have named them 'Small Jump', 'Medium Jump' and 'Big Jump'. 我想做的是-我有3个单选按钮，分别命名为“小跳跃”，“中跳跃”和“大跳跃”。 I want a 30x30 div to move across the screen at each click on the radio button. 每次单击单选按钮时，我希望30x30的div在屏幕上移动。 And I want to use math.random that way the div is not just going to float to the same area again if I re-click the 'radio' button. 我想以这种方式使用math.random，如果我重新单击“ radio”按钮，div不仅会再次浮动到同一区域。

How can I do this? 我怎样才能做到这一点？ I have mouseover feature that I want, but the radio buttons do NOT move the div. 我具有所需的鼠标悬停功能，但是单选按钮不能移动div。

Here is the code I have so far. 这是我到目前为止的代码。

    <html>
<head>

<style>
div.a {
width: 50px;
height:50px;
background-color:red;
position:absolute;
}
</style>


<body>
<h3>Click</h3>
Small Jump <input type="radio" id="smallRadio" name="speed"><br>
Medium Jump: <input type="radio" id="mediumRadio" name="speed"><br>
Big Jump: <input type="radio" id="largeRadio" name="speed"><br>

<div class='a' id="mainDiv" onmouseover=" move();"></div>

<script type="text/javascript">

console.log("hello");

function move() {
    var redBox = document.getElementById("mainDiv");
    var position = parseInt(redBox.style.left);
    var radios = document.getElementsByName("speed");
    if (radios[0].checked) {
        console.log('small button checked');
    }
    console.log(radios);
    position = position || 0;
    redBox.style.left = position + 50 + "px";
}
       function showStyle() {
     var id = document.getElementById("a");
     var str = "";


     // var chosenValue = Math.random() * 10; 
     str = str + "position: " + id.style.position + ";";
     str += "<br>top: " + id.style.top;
     str += "<br>left: " + id.style.left;
     str += "<br>width: " + id.style.width;
     str += "<br>height: " + id.style.height;
     document.getElementById("smallRadio").innerHTML = str;

    }
</script>
</body>
</html>

Answer 1

Here is a example with comments explaining what it does. 这是一个带有注释的示例，说明其功能。 Is uses jQuery (sorry) since that has a far better (and easier) way of doing JavaScript things for all browsers :) 是使用jQuery（对不起），因为它为所有浏览器提供了一种更好（更轻松）的JavaScript方式：）

 $( document ).ready( function(){ // Initiate mouseover function when page is loaded $('#mainDiv').mouseover(function(){ // What to do when mouse hovers over #mainDiv: // Get step size (value) from the radio-input named 'speed' that is checked : var stepSize = parseInt( $('input[type=radio][name=speed]:checked').val() ); // Get the current position: var pos = $( this ).position(); var left = parseInt( pos.left ); var top = parseInt( pos.top ); // Calculate new positions var new_left = left + stepSize; var new_top = top + stepSize; // Change the element's CSS to the new position(s) $( this ).css('left', new_left + 'px' ); $( this ).css('top', new_top + 'px' ); }); });

 div.a { width: 50px; height:50px; background-color:red; position:absolute; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3>Choose step size:</h3> 1 px <input type="radio" id="smallRadio" name="speed" value="1" checked="checked"><br> 10 px <input type="radio" id="mediumRadio" name="speed" value="10"><br> 100 px <input type="radio" id="largeRadio" name="speed" value="100"><br> <div class='a' id="mainDiv" onmouseover=" move();"></div>

Answer 2

I created a fiddle with a potential solution : 我创建了一个具有潜在解决方案的小提琴：

Basically I removed the event handler from the html: 基本上，我从html中删除了事件处理程序：

<h3>Click</h3>
Small Jump <input type="radio" id="smallRadio" name="speed"><br>
Medium Jump: <input type="radio" id="mediumRadio" name="speed"><br>
Big Jump: <input type="radio" id="largeRadio" name="speed"><br>

<div class='a' id="mainDiv"></div>

And moved it to the JS: 并将其移至JS：

element = document.getElementById('mainDiv');
element.addEventListener("mouseover", function() {
    moveBox();
});

function moveBox() {
    var redBox = document.getElementById("mainDiv");
    var position = parseInt(redBox.style.left);
    var radios = document.getElementsByName("speed");
    if (radios[0].checked) {
        console.log('small button checked');
    }

    position = position || 0;
    redBox.style.left = position + 50 + "px";
}

I didn't add the random movements because I didn't know what you meant and figured it shouldn't be too hard to add that part of it. 我没有添加随机运动，因为我不知道您的意思，并且认为添加它的这一部分应该不太难。

不使用JQuery通过带有math.random的单选按钮移动div

问题描述

2 个解决方案

解决方案1
0 2016-02-11 00:15:40

解决方案2
0 2016-02-11 00:33:01

不使用JQuery通过带有math.random的单选按钮移动div

问题描述

2 个解决方案

解决方案1 0 2016-02-11 00:15:40

解决方案2 0 2016-02-11 00:33:01

解决方案1
0 2016-02-11 00:15:40

解决方案2
0 2016-02-11 00:33:01