Java Reference
In-Depth Information
Chapter 12
exercise 1 Question
The code for alerting a single message in Example 1 isn't very exciting. Modify the code to display a
random message from a set of three possible messages.
exercise 1 Solution
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chapter 12: Question 1</title>
<style>
[data-drop-target] {
height: 400px;
width: 200px;
margin: 2px;
background-color: gainsboro;
float: left;
}
.drag-enter {
border: 2px dashed #000;
}
.box {
width: 200px;
height: 200px;
}
.navy {
background-color: navy;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<div data-drop-target="true">
<div id="box1" draggable="true" class="box navy"></div>
<div id="box2" draggable="true" class="box red"></div>
</div>
<div data-drop-target="true"></div>
<script>
function getRandomMessage() {
var messages = [
"You moved an element!",
"Moved and element, you have! Mmmmmmm?",
