I have been trying to find an UNDERSTANDABLE way of creating a JS button but I can't understand parent node child eating and whatnot. I feel so close to perfecting my little game but can't quite get there.
var health=100;
var ehealth=100;
var atk;
var eatk;
function attack(x){
x=Math.floor(Math.random()*11);
atk=x;
ehealth=ehealth-atk
document.write('Enemy Health:' + ' ' + ehealth + ' ')
}
function eattack(x){
x=Math.floor(Math.random()*11);
eatk=x;
health=health-eatk
document.write('Health:' + ' ' + health + '<br/>\n')
}
function dead(){
if(health<=0&&ehealth<=0){
document.write('A Draw');
}else{
if(health<=0){
document.write('You Lose');
}else{
if(ehealth<=0){
document.write('You Win');
}
}
}
}
function battleRound() {
attack(0);
eattack(0);
dead();
if( health>=0&&ehealth>=0 ) {
setTimeout( battleRound, 400 );
}
}
</script>
<button onclick='battleRound()'>Start</button>
<button onclick="document.location.reload(true)">Reset</button>
</body>
I want the reset button to appear after the battle is complete but the whole internet appears to be screaming child node and parent something :(
4th question I've asked today so sorry for my newbie-ish-nes
You could add a style of display: none to the reset button then show it once the battle is complete by using.
element.removeAttribute("style")
Related
This is my first post on these forums. I'm trying to create a table that calls its numbers from a VoIP test result on a program that I run in the HTML. currently, im trying to make the result table look "pretty" by if the VoIP Jitter is recorded 1 or above it will change the text color to red and vise versa to green.
function testFinished(vJit) {
voipcolor(vJit);
document.getElementById("aftert").innerHTML='<table class="tableRes" id="tableRes"><style>table {border:1px solid black; margin-left:auto; margin-right:auto;} th, td{border:1px solid black;}</style><thead><thead><tr><th colspan="2">VoIP Test</th></tr></thead><Tr><td>Jitter</td><td>' + vJit + 'ms</td></tr></table>';
}
I have also created the an if statement but for some reason, I keep getting errors for the "unexpected token if":
function voipcolor(vJit)
if (vJit < 1) {
let vJit = '<p style="color:green;">' + vJit + '</p>'
}else if (vJit >= 1) {
let vJit = '<p style="color:red;">' + vJit + '</p>'
}
}
there is more to the table but because i am asking about the colors i figured i would just refrence 2 cells instead of 10 or more.
what is causing the error with the if statement?
what is the proper way to insert the color change?
so I realize I need a return statement and tried adding that to the function also I beleave I edit the else issue that #Taplar was mentioning.
function voipcolor(vJit) {
if (vJit < 1) {
return voipcolor.style.color = "green"
}else{
return voipcolor.style.color = "red";
}
}
but nothing is happening. I believe I need to call the voipcolor(vJit) but im not sure how.
I'm not sure how all your HTML/CSS is defined, but can you make your code look something like this?
if (vJit < 1){
p.style.color = "green";}
if (rating >= 1){
p.style.color = "red";}
Playing with this might help too: https://www.w3schools.com/js/js_htmldom_css.asp
so I ended up asking my mentor/teacher/boss ... thing... person, for some help. I was not calling the function with the if statement. so what I did was called the function from the table replacing + vJit + with function voipcolor(vJit)
then in the voipcolor function instead of return voipcolor.style.color = "green" I used return '<span style="color: green">' + vJit + '</span>'
Because I am calling the function the whole function runs in order. when I use the return statement, the function stops running at the return statement. there are other ways to make this work and explaining this is more for my understanding than anything else. I do hope people will learn from this and understand the innerHTML attribute as I have.
I'm trying to code a rock paper scissors game where when I hit the new game button in the middle of the screen it prompts the user for two name inputs. I've seen this in action before but I can't figure out where I'm going wrong. Hopefully this is enough code to figure it out, otherwise I can post more! Thanks in advance.
$('#gameController').bind('click', function() {
if (game.running === false) {
if ($(this).text() == 'New Game') {
for (i = 1; i < 3; i++) {
do {
var player = prompt('Player ' + i + ', enter your name...');
} while (!player);
$('#player' + i + 'Name').text(player);
game.addPlayer(player);
}
};
I tried executing only the for loop with do...while in jsfiddle. It works fine.
Which means your error has something to do with $('#player' + i + 'Name').text(player); or game.addPlayer(player);
Based on the comments, I suspect an infinite recursion at game.addPlayer(player);. Glad that you found your solution.
You can use alert() e.g. var player = alert('Player ' + i + ', enter your name...');
I've been messing around with JavaScript samples and ever since I edited this one I can't figure out why it wont work. Everything looks fine to me, but here is the code (JSFiddle)
https://jsfiddle.net/en2a8c1v/1/
function click(e) {
document.body.style.backgroundColor='" + e.target.id + "';
}
document.addEventListener('DOMContentLoaded', function () {
var divs = document.querySelectorAll('div');
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', click);
}
});
First, make sure that in the JS settings you have no-wrap enabled (I used no-wrap head) in the load type dropdown.
Next, you need to understand that when you call e.target.id, this is already a string variable. You are literally making the background color "e.target.id". That isn't a color.
Simply change document.body.style.backgroundColor='" + e.target.id + "';
to document.body.style.backgroundColor= e.target.id;
I'm not going to touch on the fact that this is a terrible way to go about this as I am assuming you are just playing with event handling.
Maybe someone will find this usefull. Use CSS attribute: background-color:rgb(x,y,z);
You can do it on simple way, for example:
document.getElementById("elementID").style.backgroundColor = 'rgb('+ this.red + ', ' + this.green + ', ' + this.blue + ')';
These r,g,b values can be, for example:
this.red = 0;
this.green = 255;
this.blue = 130;
So right now I'm trying to program what would essentially be a simple game where the user is given a riddle and when they give the correct answer they are allowed to move on to the next riddle.
Right now i can bring up a prompt that you then answer the question for which leads to more text, and i can hypothetically add a button in ... but then along with the button comes all of the coding surrounding it also?
Is there anyway to fix this? Or is there a better coding alternative for what i'm trying to do? I kind of wish I knew how to use forms instead of prompts and buttons but from what i've tried to find i can't seem to see any way of doing that.
Here's what i've written so far (sorry i haven't posted on this website before, i'm actually just pretty desperate now) (Ps. Im aware that i'm very bad at coding):
<p>Click the button!.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function nextButton()
{{
<button onclick="nextButton()">Next question!</button>
}
var y;
var name=prompt("What are bunnies?");
if (name!="fluffy")
{
y= name + " " + "is" + " " + "wrong!";
document.getElementById("demo").innerHTML=y;
}
else
{
y="correct!";
document.getElementById("demo").innerHTML=y;
}
}
function myFunction()
{
var x;
var name=prompt("what is cute a fluffy and adorable?");
if (name!="a bunny")
{
x= name + " " + "is" + " " + "wrong!";
document.getElementById("demo").innerHTML=x;
}
else
{
x="correct!" + nextButton ;
document.getElementById("demo").innerHTML=x;
}
}
Maybe change your nextButton function to the following:
function nextButton()
{
return "<button onclick='nextButton()'>Next question!</button>";
}
and see if that works.
EDIT: Also change
x="correct!" + nextButton ;
To:
x="correct!" + nextButton() ;
That should fix the script problem.
Good luck!
You could try an on load hide function and then implement an else if statement to if answer a is selected show button else msbox "Please try again" ? Sorry; I'm taking what I've learned from C# and C++ and seeing if it might be helpful for you in Javascript, but I'm not 100% sure it will be. (So if you could let me know that would be great too. :) )
I am developing a webpage but I came into some trouble with some javascript code.
I am using the Nicedit as WYSIWYG for textareas, which, as stated in its main page, is as easy as copy/paste this 2 lines anywhere in my web page:
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
That's working great with the default textareas of the page. The problem is that I also have this javascript to add more textareas:
function addchapter()
{
if (num_chapter < 10)
{
var num=num_chapter+1;
document.getElementById('chapters').innerHTML += "<h3>Chapter " + num + "</h3> Title: <input type='text' name='titlechapter_" + num + "'><br>Content:<textarea name='chapter_" + num + "'></textarea>";
}
else if (num_chapter == 10)
{
document.getElementById('chapters').innerHTML += "<br />Maximum is 10 chapters.";
}
num_chapter += 1;
}
So when I add a textarea through javascript, it doesn't have the proper style; it's not implementing Nicedit. The thing is that the textareas are all standard, so there's no difference between the code in both cases. I don't know too much of javascript but I think that the problem might be that the Nicedit code runs ONCE when the page loads, and that's it. Any idea of how to make it run when the page loads (<= already done) AND when the addchapter function is run?
The relevant HTML bit is this:
<div id="chapters">
</div>
<button type="button" onclick="addchapter()"> Add chapter </button>
My page where you can see the odd behaviour is this (broken link), under Chapter 1 you see the 'Add chapter' button.
Thank you all so much.
EDIT 1, Error console output:
When the page loads it throws this:
"GET http://js.nicedit.com/nicEditIcons-latest.gif
bkClass.extend.getStylenicEdit-latest.js:8
bkClass.extend.constructnicEdit-latest.js:38
AnicEdit-latest.js:8
bkClass.extend.addInstancenicEdit-latest.js:37
bkClass.extend.panelInstancenicEdit-latest.js:37
nicEditors.allTextAreasnicEdit-latest.js:37
bkLib.domLoaded"
When I add a new chapter:
"Uncaught TypeError: Object #<bkClass> has no method 'removeInstance'
bkClass.extend.checkReplacenicEdit-latest.js:37
bkClass.extend.panelInstancenicEdit-latest.js:37
nicEditors.allTextAreasnicEdit-latest.js:37
(anonymous function)/file/new/:112
onclick"
You have to assign a unique ID to the text fields you add to the page. To convert it into an editor you can then call;
nicEditors.findEditor(editorID);
Or you can call nicEditors.allTextAreas() again. But I'm not sure if that will remove the existing content from the editors that already exist.
Source: The API.
You can add try{}catch(e){} block to your code
jQuery('.js-control-des').each(function () {
var index = jQuery(this).attr('lang');
var editor = jQuery(this).find('textarea');
var editor_id = editor.attr('id');
var editor_loaded = editor.attr('rel');
if (editor_loaded == undefined || editor_loaded != null || editor_loaded == 0) {
var editor_new_width = parseFloat(editor.css('min-width')) + 7 + 'px';
editor.css({
width: editor_new_width,
'max-width': editor_new_width,
'min-width': editor_new_width
});
try {
new nicEditor({maxHeight: 300}).panelInstance(editor_id);
jQuery(this).attr('rel', 'editor-loaded');
jQuery(this).find('.nicEdit-main').attr('data-index', index).keyup(function (e) {
if (vnLineUcp.editorKeyUp(jQuery(this)) == false) {
return false;
}
});
} catch (e) {
}
}
});