Moving a div by radio buttons with math.random without using JQuery
Question
I'm relatively new to JavaScript and have been reading up on it. I don't know JQuery yet and plan to do that next. 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'. I want a 30x30 div to move across the screen at each click on the radio button. 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.
How can I do this? I have mouseover feature that I want, but the radio buttons do NOT move the 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>
2 answers
solution1
0 2016-02-11 00:15:40
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 :)
$( 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>
solution2
0 2016-02-11 00:33:01
I created a fiddle with a potential solution :
Basically I removed the event handler from the 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:
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.