Javascript button that changes properties of html elements using DOM Events - javascript

I'm trying to make a button that changes the color of the paragraph elements to a random color whenever an user clicks the button. It doesn't seem to work and my text editor (Brackets) are telling me I made 12 mistakes but I don't really sees it.
This is what I wrote towards the end of my webpage:
<button id="button1">Color Changer</button>
</div>
</div>
</div>
<script type="text/javascript" src=script.js></script>
</body>
</html>
This is script.js:
var button1El = document.getElementById("button1");
var paragraphsEl = document.getElementsByTagName("p");
var colorChange = function () {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
for (var i = 0; i < paragraphsEl.length; i += 1) {
paragraphsEl[i].style.color = rgb(r, g, b);
}
}
button1El.addEventListener("click", colorChange);
Thanks in advance!

Few things wrong here, which I listed in a comment above:
paragraphsEl is an array, you can't set style.color on an array, you need to iterate over each of the items in the array to set that value
style.color will take a string value, you're trying to call a function called rgb, which doesn't exist, pass in a string to make this work
Use integers in RGB with `Math.floor(Math.random() * 255)
Close, but you seem to be forgetting how a few things work.
Remember that breaking the issue down into pieces and figuring out what data types are being used in certain places will help you avoid a lot of these issues.
var button1El = document.getElementById("button1");
var paragraphsElements = document.getElementsByTagName("p");
var colorChange = function () {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
for(var i = 0; i < paragraphsElements.length; i++) {
paragraphsElements[i].style.color = 'rgb(' + r + ', ' + g + ', ' + b + ')';
}
}
button1El.addEventListener("click", colorChange);
Here's a codepen link that demonstrates working code, I had made a couple mistakes because I didn't test it:
https://codepen.io/anon/pen/PdmKVd

Related

Simple way to avoid previous number in Math.random?

I am working on a random quote/color generator. I want it to avoid repeating previous color (in a simple/easy/understandable way as I'm a complete beginner in JS/jQuery).
Here is my code, I don't know what is wrong with it.
var colors = ["#8ee5ee", "#ee82ee", "#469649", "#ff4444", "#ffa500", "#dddddd", "#efc3c8", "#d2d449", "#f91589","#906161","#875d39","#ffdab9","#d1e529","#3a718b"];
var color = Math.floor(Math.random() * colors.length);
var lastcolor = 0;
while(color === lastcolor){
color = Math.floor(Math.random() * colors.length) + 1;
}
$("body").animate({backgroundColor: colors[color]}, 1000);
$("#new-quote").animate({backgroundColor: colors[color]}, 1000);
$("h6").fadeOut(1000);
$("p").fadeOut(1000);
});
});
Basically, when I click a button (#new-quote), the current background color changes to another random color and so on. But now and then the color doesn't change as the machine chose the same number/color as the current one. I'm trying to avoid that!
I guess there's some sort of loop around the code you provided. Then you shouldn't reset the color, but to assign it to the previous one.
var colors = ["#8ee5ee", "#ee82ee", "#469649", "#ff4444", "#ffa500", "#dddddd", "#efc3c8", "#d2d449", "#f91589","#906161","#875d39","#ffdab9","#d1e529","#3a718b"];
var color = Math.floor(Math.random() * colors.length);
while(color === lastcolor){
color = Math.floor(Math.random() * colors.length) + 1;
}
lastcolor = color;
And of course you should define your lastcolor at the beginning of the script. Place
var lastcolor = 0;
after <script> tag opens.
You could use simply a new random value, because if you add one, you might get undefined if the random value is the index of the last element.
while (color === lastcolor){
color = Math.floor(Math.random() * colors.length); // + 1;
// without ^^^^^^^
}
A better style would be one assignment with a do ... while loop.
var colors = ["#8ee5ee", "#ee82ee", "#469649", "#ff4444", "#ffa500", "#dddddd", "#efc3c8", "#d2d449", "#f91589", "#906161", "#875d39", "#ffdab9", "#d1e529", "#3a718b"],
color,
lastcolor = 0;
do {
color = Math.floor(Math.random() * colors.length);
} while(color === lastcolor);
lastcolor = color;
Simpler method: Use splice() method to remove the current element from your colors array so that every time you run the code, the previously occurring element wont occur again.
var color = Math.floor(Math.random() * colors.length);
//from index = color, delete that element using splice(index, # of elements to delete)
colors.splice(color, 1);
//now colors array will not contain the colors[color] element
for (var i = 0; i < colors.length; i++) {
console.log(colors[i]);
}

Using math.random in button to set a select option?

I'm trying to make a button that randomly sets a select option when clicked. I can't figure out what I am doing wrong though...
http://jsfiddle.net/GamerGorman20/nw8Ln6ha/25/
$('#rand').click(
function() {
randNum();
var num = "";
document.getElementById("mySelect").value.innerHTML = favWebComics[num];
});
var randNum = function() {
num = Math.round(Math.random() * 2) + 1;
return num;
};
The shown code is only a small part of the larger script housed in the linked jsfiddle.
I plan to add more selections later, but I want to get the code figured out before I spend time on those.
Worth mentioning, my understanding of this is very limited, so keeping the advice simple is GREATLY appreciated.
The relevant part of your code that you will need to change will look like this when complete (see the updated jsfiddle):
$('#rand').click(function() {
var $select = document.getElementById('mySelect'),
max = $select.getElementsByTagName('option').length - 1;
$select.selectedIndex = randNum(1, max);
myFunction();
});
var randNum = function(min, max) {
num = Math.floor(Math.random() * (max - min + 1)) + min;
return num;
};
var myFunction = function() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
document.getElementById("image").innerHTML = favWebComics[x][1];
document.getElementById("web").innerHTML = favWebComics[x][0];
document.getElementById("tags").innerHTML = "Tags: " + favWebComics[x][2];
};
I haven't changed the style or structure of your code, but just some of the basic properties.
The problem you have is with innerHTML. You cannot set innerHTML on an element's value.
Instead, what you can do is generate a random number and set the selectedIndex property of the select element to that random number.
Then, you'll call the function that displays the images and whatnot that you need.
You cannot change the select with innerHTML like this:
document.getElementById("mySelect").value.innerHTML = favWebComics[num];
You have to instead change the value, and apply the change like so
$("#mySelect").val("New text").change();
or
$("#mySelect").prop('selectedIndex', index).change();

Set variable random number of dots

I am trying to set a variable random number of dots. I can generate random numbers using Math.random(). I tried this without any luck:
function generate() {
Math.floor(Math.random() * 500)
}
var randomdots = generate();
What is the correct approach to set a variable random number of dots?
This method does nothing useful, it throws away the result before using it. Maybe you want:
function generate() {
var count = Math.floor(Math.random() * 500);
var result = '';
for (i = 0; i < count; ++i) {
result = result + '.';
}
return result;
}
document.write(generate());
Remember that functions in JavaScript must have a return if you want to get a value from them.
You can also use this
function generate() {
var index = Math.floor(Math.random() * 500);
return new Array(index).join(".");
}
var randomdots = generate();
You could have a JavaScript that writes bullets on page load. Do it like this:
var number = Math.ceil((Math.random() * 500)) + 1;
for (i=0;i<number;i++){
document.getElementById('output').innerHTML += '• ';
}
<p id="output"></p>
Let me know if you need additional help!
Although caslaner's answer seems to be the easiest way to achieve this, for educational purposes, here's a recursive function that does the same.
function generate(str,rm) {
if(rm === undefined) rm = Math.floor(Math.random() * 500);
return rm ? generate((str||'') + '.',rm-1) : str;
}
document.write(generate());

do something when function executes Jquery

So I have a function that is recursive for inverting colors. Here is the code:
function invert(id,what){
var color = $(id).css(what);
var matchColors = /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/;
var match = matchColors.exec(color);
var r = (255 - match[1]).toString() + ",";
var g = (255 - match[2]).toString() + ",";
var b = (255 - match[3]).toString();
answer = 'rgb(' + r + g + b + ')' ;
$(id).css(what,answer);
};
So essentially I have a function that can be called in many instances (clicks of specific ids, hover on specific classes, etc.) and I do not know them all. But I need to know every single time this function gets called. How can I have an outside line of code that sets a variable equal to the amount of times the function has been called?
Wrap your function.
var wrapped = (function wrapper(present) {
function wrapping() {
++wrapping.count; // increment invocation count
return present.apply(this, arguments);
}
wrapping.count = 0; // counter, avaliable from outside too
return wrapping;
}(invert));
If you need to call it invert too, re-assign invert after.
invert = wrapped;
invert.count; // 0
invert();
invert.count; // 1
invert();
invert.count; // 2
I am not sure what your exact scenario is, but maybe you could override the function with a wrapper:
var invertOriginal = invert;
var counter = 0;
var invert = function(id, what, max) {
invertOriginal(id, what, max);
// do counter stuff here, e.g.
counter++;
};

stopping random choose existing option

In my game, when the "next-question" button is clicked, it should choose a new word in the grid for the user to spell. It does this, but the problem is that instead of going to another word, sometimes the randomization brings it back to the word it is already on. I need to make it so that it chooses any other than the one its on.
//Next question click event
$('.next-question').on('click', function () {
$('td').removeClass('highlight-problem');
var r = rndWord;
while (r == rndWord) {
rndWord = Math.floor(Math.random() * (listOfWords.length));
}
//Adds and removes nesesary classes
$('td[data-word="' + listOfWords[rndWord].name + '"]').addClass('highlight-problem');
$('td[data-word=' + word + ']').removeClass('wrong-letter').removeClass('wrong-word').removeClass('right-letter');
var spellSpace = $('td[data-word="' + listOfWords[rndWord].name + '"]').hasClass('right-word');
if (spellSpace) {
$(".next-question").eq(($(".next-question").index($(this)) + 1) %$(".next-question").length).trigger("click");
} else {
$("#hintSound").attr('src', listOfWords[rndWord].audio);
hintSound.play();
$("#hintPic").attr('src', listOfWords[rndWord].pic);
$('#hintPicTitle').attr('title', listOfWords[rndWord].hint);
}
});
What's the value of rndWord before your while loop? It looks like a scoping issue - you either need to declare rndWord outside your function so it's preserved between calls or pass it in every time.
var rndWord;
function() {
//Next question click event
....
var r = rndWord;
while (r == rndWord) {
rndWord = Math.floor(Math.random() * (listOfWords.length));
}
After further clarification:
var currentWord;
function ClickEventHere() {
r = currentWord;
while (r == currentWord) {
nextIndex = Math.floor(Math.random() * (listOfWords.length));
currentWord = listOfWords[nextIndex];
}
...
}
There's no point in comparing an integer r with an array as you're doing in your while statement - you can either store the index or the word itself in a global and then check to make sure it's not being reused.
After this loop, currentWord will contain the next, different word
Find random word, compare to last found if the same find another. Provided you have a decent number of words it should be enough.

Categories

Resources