I'm trying to create a random number generator where based on the number an image is chosen from the img folder that is on the same hierarchy as the CSS folder. However the image is being chosen and being displayed.
<script type="text/javascript">
var addObj = {
add: function () {
var box = document.getElementById('box');
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var pic = document.getElementById('pic')
var x = Math.floor(Math.random() * 18) + 1;
var y = Math.floor(Math.random() * 18) + 1;
var z = Math.floor(Math.random() * 18) + 1;
console.log(x);
console.log(y);
console.log(z);
},
EventListners: function () {
var button = document.getElementById('rune');
button.addEventListener('click', addObj.add, false);
if (addObj.add.x = 1) {
addObj.add.box = "url('./img/fa.jpg')";
}else {
console.log("n/a")
}
}
};
addObj.EventListners();
You can use
var box = document.getElementById('box');
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var pic = document.getElementById('pic')
// this elements you can get globally
var addObj = {
add: function () {
let x = Math.floor(Math.random() * 18) + 1;
let y = Math.floor(Math.random() * 18) + 1;
let z = Math.floor(Math.random() * 18) + 1;
if (x == 1) { // the checker block you should add to the function at the eventlistener, the `=` is the assignment operator, the logically operator the `==` or the `===`
box.src = './img/fa.jpg'; // the `box` variable is an image element, you can set the source with the `src` attribute
}else {
console.log("n/a")
}
},
EventListners: function () {
var button = document.getElementById('rune');
button.addEventListener('click', addObj.add, false);
}
};
addObj.EventListners();
The OOP is very nice thing, but at first you should know the language well.