Can someone please help me. I don't know where I have gone wrong. The main thing not working is my start new game function but I don't know where I have gone wrong. Thanks in advance.
This is my fiddle
http://jsfiddle.net/Matt1990/jL7f3p39/25/
This is my javascript
enter code here
var Array = ["monitor", "program", "keyboard", "gaming", "harddisk", "software", "printer", "scanner", "firewall", "desktop", "system", "malware", "windows"];
var word;
var guessCount = 0;
var guess;
var input;
var wordLength;
var wordSubstring;
var currentWord;
function startGame() {
guess = "";
guessCount = 10;
word = Array[Math.floor(Math.random() * Array.length)];
currentWord = 0;
wordLength = word.length;
wordSubstring = currentWord.substring;
console.log(word);
var myElement = document.getElementById("button").innerHTML = "Click to guess";
var myPicElement = document.getElementById("hangimage").src = "http://fetlar.kingston.ac.uk/pp/hangman10.jpg";
for (var count = 0; count < word.length; count++) {
guess = guess + "-";
}
document.getElementById("guess").innerHTML = guess;
}
function guessLetter() {
var correct = 0;
var inputBox = document.getElementById("guessinput");
input = inputBox.value;
for (var count = 0; count < wordLength; count++) {
if (input == word.substring(count, count + 1)) {
correct++;
guess = guess.substring(0, count) + input + guess.substring(count + 1, guess.length + 1);
document.getElementById("guess").innerHTML = guess;
}
}
if (correct == 0) {
guessCount--;
}
var url = document.getElementById("hangimage").src = "http://fetlar.kingston.ac.uk/pp/hangman" + guessCount + ".jpg";
if (guess == word) {
document.getElementById("hangimage").src = "http://fetlar.kingston.ac.uk/pp/hangman_win.jpg";
alert("You guessed the word correctly. You win!");
}
if (guess == 0 + word) {
document.getElementById("hangimage").src = "http://fetlar.kingston.ac.uk/pp/hangman0.jpg";
}
}
startGame();
document.getElementById("button").onclick = guessLetter;
function startNewGame(showMessage) {
guess = "";
guessCount = 10;
word = Array[Math.floor(Math.random() * Array.length)];
currentWord = 0;
wordLength = word.length;
wordSubstring = currentWord.substring;
console.log(word);
var myElement = document.getElementById("button").innerHTML = "Start New Game";
for (var count = 0; count < word.length; count++) {
guess = guess + "-";
document.getElementById("guess").innerHTML = guess;
}
}
and this is my HTML
<fieldset>
<div style="text-align: center;">
<h1>Hangman</h1>
<h2> Can you save the stick man? <h2>
<img id="hangimage" src="http://fetlar.kingston.ac.uk/pp/hangman9.jpg" />
<div id="guess" style="font-size: 2.5em; font-family: arial; color: red;">- - - - - - - </div>
<input id="guessinput" type="text" size="2" />
<button id="button">Click to guess</button>
<br/>
<div>Hint:The word is a computer-related term</div>
<button id="button">Start New Game</button>
</fieldset>
As i can see
HTML
<button id="button2">Start New Game</button>
JAVASCRIP
document.getElementById("button").onclick = guessLetter;
// add this
document.getElementById("button2").onclick = startNewGame;
http://jsfiddle.net/rnrlabs/jL7f3p39/30/
Related
Can anyone help me to get this (https://jsfiddle.net/hmatrix/v3jncqac/) code to work?
Inentention: I want to create a counter that increases in increments.
My HTML:
<body onload="incrementCount(10)">
<div class="main_container" id="id_main_container">
<div class="container_inner" id="display_div_id">
</div>
</div>
</body>
My JS:
var counter_list = [10,10000,10000];
var str_counter_0 = counter_list[0];
var str_counter_1 = counter_list[1];
var str_counter_2 = counter_list[2];
var display_str = "";
var display_div = document.getElementById("display_div_id");
function incrementCount(current_count){
setInterval(function(){
// clear count
while (display_div.hasChildNodes()) {
display_div.removeChild(display_div.lastChild);
}
str_counter_0++;
if (str_counter_0 > 99) {
str_counter_0 = 0; // reset count
str_counter_1++; // increase next count
}
if(str_counter_1>99999){
str_counter_2++;
}
display_str = str_counter_2.toString() + str_counter_1.toString() + str_counter_0.toString();
for (var i = 0; i < display_str.length; i++) {
var new_span = document.createElement('span');
new_span.className = 'num_tiles';
new_span.innerText = display_str[i];
display_div.appendChild(new_span);
}
},1000);
}
<body onload="incrementCount(10)">
<div class="main_container" id="id_main_container">
<div class="container_inner" id="display_div_id">
</div>
</div>
</body>
<script>
var counter_list = [10,10000,10000];
var str_counter_0 = counter_list[0];
var str_counter_1 = counter_list[1];
var str_counter_2 = counter_list[2];
var display_str = "";
var display_div = document.getElementById("display_div_id");
function incrementCount(current_count){
setInterval(function(){
// clear count
while (display_div.hasChildNodes()) {
display_div.removeChild(display_div.lastChild);
}
str_counter_0++;
if (str_counter_0 > 99) {
str_counter_0 = 0; // reset count
str_counter_1++; // increase next count
}
if(str_counter_1>99999){
str_counter_2++;
}
display_str = str_counter_2.toString() + str_counter_1.toString() +
str_counter_0.toString();
for (var i = 0; i < display_str.length; i++) {
var new_span = document.createElement('span');
new_span.className = 'num_tiles';
new_span.innerText = display_str[i];
display_div.appendChild(new_span);
}
},1000);
}
</script>
JSFIDDLE: https://jsfiddle.net/v3jncqac/32/
Your onload function cannot find the function because your js is in a different file. you need to add script src on top of html or do it as shown above.
i have some code that takes input numbers and put them into a new array. How can i make it so my alert tells the user how many times the number is represented in the input? Exampel 0,4,4,2,3,4,1 would show "0 appears 1 time, 4 appears 3 times" and so on...I think im close but cant get the final part right...
<!DOCTYPE html>
<html>
<head>
<title>Oppgave 5</title>
<script type="text/javascript">
window.onload = btn;
function btn() {
document.getElementById("btn").onclick = showTxt;
}
function showTxt() {
var text = "";
var input = document.getElementById("input").value;
var split = input.split(",");
var newArray = split;
var count = 0;
for (var i = 0; i < newArray.length; i++) {
if (newArray[i] === parseInt(input)) {
count++;
}
alert("Number " + newArray[i] + " appears " + count + " times");
}
text += newArray;
document.getElementById("print").innerHTML = text;
}
</script>
</head>
<body>
<input id="input" type="text">
<button id="btn" type="button">Show</button>
<p id="print"></p>
</body>
</html>
I have changed your showTxt function
function showTxt() {
var text = "";
var input = document.getElementById("input").value;
var split = input.split(",");
var newArray = split;
var count;
for (var i = 0; i < newArray.length; i++) {
count = 0;
for (var j = 0; j < newArray.length; j++) {
if (newArray[i] === newArray[j]) {
count++;
}
}
alert("Number " + newArray[i] + " appears " + count + " times");
}
text += newArray;
document.getElementById("print").innerHTML = text;
}
You could use the method from this gist like so:
window.onload = btn;
function btn() {
document.getElementById("btn").onclick = showTxt;
}
function showTxt() {
var text = "";
var input = document.getElementById("input").value;
var split = input.replace(/ /g, '').split(",").sort();
compressArray(split);
}
function compressArray(original) {
var compressed = [];
// make a copy of the input array
var copy = original.slice(0);
// first loop goes over every element
for (var i = 0; i < original.length; i++) {
var myCount = 0;
// loop over every element in the copy and see if it's the same
for (var w = 0; w < copy.length; w++) {
if (original[i] == copy[w]) {
// increase amount of times duplicate is found
myCount++;
// sets item to undefined
delete copy[w];
}
}
if (myCount > 0) {
var a = new Object();
a.value = original[i];
a.count = myCount;
compressed.push(a);
}
}
for (var i = 0; i < compressed.length; i++) {
var message = compressed[i].value + ' appears ' + compressed[i].count + ' times.';
alert(message);
document.getElementById("print").innerHTML += message + '</br>';
}
};
<input id="input" type="text">
<button id="btn" type="button">Show</button>
<p id="print"></p>
Check this out, may be it'll helpful .
<!DOCTYPE html>
<html>
<head>
<title>Oppgave 5</title>
<script type="text/javascript">
window.onload = btn;
function btn() {
document.getElementById("btn").onclick = showTxt;
}
function showTxt() {
var text = "";
var input = document.getElementById("input").value;
var split = input.split(",");
var newArray = split;
let countedValues = newArray.reduce(function(obj,val){
if(obj[val])
obj[val] += 1;
else
obj[val] = 1;
return obj
}, {})
for (let value in countedValues ) {
alert("Number " + value + " appears " + countedValues[value] + " times");
}
text = newArray;
document.getElementById("print").innerHTML = text;
}
</script>
</head>
<body>
<input id="input" type="text">
<button id="btn" type="button">Show</button>
<p id="print"></p>
</body>
</html>
Here is the error I get:
Here is the code:
<html>
<head>
</head>
<body>
<p> Please enter a series of numbers, each separated by a new line.<br><p>
<textarea id="myTextArea" rows = "7" cols = "50"></textarea><br>
<button onclick="processData()">Done</button>
<p id = "mean"></p>
<p id = "median"></p>
<p id = "count"></p>
<p id = "summation"></p>
<p id = "mode"></p>
<p id = "variance"></p>
<p id = "sd"></p>
<script type = "text/javascript">
function processData()
{
var arrayOfLines = document.getElementById('myTextArea').value.split('\n');
var length = arrayOfLines.length;
var modeArr = {};
var sum = 0;
var mean = 0;
var median = 0;
var count = length;
var mode = 0;
var variance = 0;
var standard deviation = 0;
var modeCounter = {};
var meanOutput = document.getElementById('mean');
var medianOutput = document.getElementById('median');
var modeOutput = document.getElementById('mode');
var countOutput = document.getElementById('count');
var summationOutput = document.getElementById('summation');
var varianceOutput = document.getElementById('variance');
var sdOutput = document.getElementById('sd');
alert("hi");
alert(arrayOfLines[0]);
sum(arrayOfLines);
mean(arrayOfLines);
median(arrayOfLines);
mode(arrayOfLines);
variance(arrayOfLines);
standardDeviation(arrayOfLines);
variance(arrayOfLines);
}
function sum(array)
{
for (var a = 0; a < length; a++)
{
sum += arrayOfLines[a];
}
alert(sum);
summationOutput.innerHTML = sum;
}
function mode (array)
{
for (var a = 0; a < length; a++)
{
for (var b = 0; b < modeArr.length; b++)
{
if (arr[a] == arr[b])
{
modeCounter[a]++;
}
}
arr[a] = arrayOfLines[a];
}
moedOutput.innerHTML = mode;
}
function mean (array)
{
mean = sum/length;
meanOutput.innerHTML = mean;
}
function median (array)
{
if (length % 2 == 1)
{
median = sortedArrayOfLines[((length - 1)/2)+1]
}
else
{
median = (sortedArrayOfLines[length/2] + sortedArrayOfLines[(length/2)+1])/2
}
medianOutput.innerHTML = median;
}
function variance (array)
{
var mean = mean(array);
return mean(array.map(function(num)
{
varianceOutput.innerHTML = Math.pow(num - mean, 2);
}));
}
function standardDeviation (array)
{
medianOutput.innerHTML = Math.sqrt(variance(array));
}
</script>
</body>
</html>
problem is here
var standard deviation = 0;
^^
replace it with
var standard_deviation = 0;
The last table and sometimes the table before as well will not load correctly sometimes which breaks the loop I have.
This error in my code started happening since I added the table creation part of my javascript.
My question is why because the way i have it works majority of the time but in these instances it does not. I am running it on jsfiddle.
Any help is appreciated.
Lastly I want to add in a picture of a star where the "new content" phrases are if you could help with that as well you would be of much help.
<html>
<head>
</head>
<body>
<input type="button" value="Delete" onclick="deleteRow()">
<table id="myTable1" border="1"></table>
<br>
<table id="myTable2" border="1"></table>
<br>
<table id="myTable3" border="1"></table>
<br>
<h1 class="box">
<table style="width:100%" id = "table1">
</table>
<br>
<p id="time"></p>
<span id="num1"></span>
+ <span id="num2"></span> =
<input id="answer" type="text" size="3"/>
<button onclick = "math1()">Check</button>
</h1>
</body>
</html>
That is the HTML the Javascript will follow this.
window.onload = function uphigh() {
document.getElementById("num1").innerHTML = parseInt(Math.floor((Math.random() * 10) + 1));
var num1 = document.getElementById("num1").innerHTML;
document.getElementById("num2").innerHTML = parseInt(Math.floor((Math.random() * 10) + 1));
var num2 = document.getElementById("num2").innerHTML;
num1 = parseInt(num1);
num2 = parseInt(num2);
var num3 = num1 + num2;
insRow(2, 5, 'myTable1', num1);
insRow(2, 5, 'myTable2', num2);
insRow(4, 5, 'myTable3', num3);
};
function uphigh() {
document.getElementById("num1").innerHTML = parseInt(Math.floor((Math.random() * 10) + 1));
var num1 = document.getElementById("num1").innerHTML;
document.getElementById("num2").innerHTML = parseInt(Math.floor((Math.random() * 10) + 1));
var num2 = document.getElementById("num2").innerHTML;
num1 = parseInt(num1);
num2 = parseInt(num2);
var num3 = num1 + num2;
insRow(2, 5, 'myTable1', num1);
insRow(2, 5, 'myTable2', num2);
insRow(4, 5, 'myTable3', num3);
}
function math1() {
var num1 = document.getElementById("num1").innerHTML;
var num2 = document.getElementById("num2").innerHTML;
num1 = parseInt(num1);
num2 = parseInt(num2);
var num0 = num1 + num2;
var answer = document.getElementById("answer").value;
answer = parseInt(answer);
if (num0 == answer) {
var things = ['Way to Go!!!', 'Congratulations!!!', 'Correct!!!', 'Your Doing Great!!!'];
var thing = things[Math.floor(Math.random() * 4)];
alert(thing);
deleteRow();
uphigh();
document.getElementById("answer").value = "";
} else {
alert("Incorrect answer!! \nPlease Try Again");
document.getElementById("answer").value = "";
}
}
function insRow(rows, col, tableId, num) {
for (var j = 0; j < rows; j++) {
var x = document.getElementById(tableId).insertRow();
for (var i = 0; i < col; i++)
var y = x.insertCell(0);
}
var row = parseInt(num / 5);
var cols = num % 5;
var x = document.getElementById(tableId).rows;
if (row != 0) {
for (var j = 0; j < row; j++) {
x = document.getElementById(tableId).rows;
var y = x[j].cells;
for (var i = 0; i < 5; i++) {
y[i].innerHTML = "NEW CONTENT";
}
}
}
var y = x[row].cells;
for (var i = 0; i < cols; i++) {
y[i].innerHTML = "NEW CONTENT";
}
}
function deleteRow() {
for (var j = 0; j < 2; j++)
document.getElementById('myTable1').deleteRow();
for (var j = 0; j < 2; j++)
document.getElementById('myTable2').deleteRow();
for (var j = 0; j < 4; j++)
document.getElementById('myTable3').deleteRow();
}
Building this website for helping children learn basic math.
Do not know how to add a link to fiddle.
The below code is my html code
Star.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="CssText.css">
</head>
<body>
<form>
Enter number of rows: <input type="text" name="t1" /> <input
type="button" value="Display Diomond"
onclick="return myFunction(this.form)" />
</form>
<p id="p"></p>
<script src="StarPrint.js"></script>
</body>
</html>
The below code is my javascript code
StarPrint.js
function myFunction(form) {
var no;
no = form.t1.value;
no = no / 2;
var no2 = no;
var no3 = no;
var no4 = no;
var no5 = no;
var no6 = no;
for ( var i = 0; i < no; i++) {
for ( var index = 0; index < no2; index++) {
document.getElementById("p").innerHTML ="  ";
}
no2 = no2 - 1;
for ( var index2 = 0; index2 < (i * 2) + 1; index2++) {
document.getElementById("p").innerHTML = "*";
}
document.getElementById("p").innerHTML="</br>";
}
document.getElementById("p").innerHTML="  ";
for ( var i = 0; i < no3 + 1; i++) {
for ( var index = 0; index <= i; index++) {
document.getElementById("p").innerHTML = "  ";
}
for ( var index2 = 0; index2 < (no4 * 2) - 3; index2++) {
document.getElementById("p").innerHTML = "*";
}
no4 = no4 - 1;
document.getElementById("p").innerHTML = "</br> ";
}
}
I want to print pattern of diamond structure.The above program was working when I used document.write instead of document.getElementById("p").innerHTML with some modification.Where is that error I am not getting it.
You are replacing the content of p every time you call document.getElementById("p").innerHTML =.
Instead, save the text into a variable and only assign it to p at the end:
function myFunction(form) {
var no;
no = form.t1.value;
no = no / 2;
var no2 = no;
var no3 = no;
var no4 = no;
var no5 = no;
var no6 = no;
var diamond = "";
for ( var i = 0; i < no; i++) {
for ( var index = 0; index < no2; index++) {
diamond +="  ";
}
no2 = no2 - 1;
for ( var index2 = 0; index2 < (i * 2) + 1; index2++) {
diamond += "*";
}
diamond+="</br>";
}
diamond+="  ";
for ( var i = 0; i < no3 + 1; i++) {
for ( var index = 0; index <= i; index++) {
diamond += "  ";
}
for ( var index2 = 0; index2 < (no4 * 2) - 3; index2++) {
diamond += "*";
}
no4 = no4 - 1;
diamond += "</br> ";
}
document.getElementById("p").innerHTML = diamond;
}
Working Example - http://jsfiddle.net/fdadE/
You are not appending the stuff you want, but just assigning. Replace all = with += like below:
document.getElementById("p").innerHTML = "  ";
to
document.getElementById("p").innerHTML += "  ";