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 += "  ";
Related
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.
I have a multidimensional array like this:
var squares = new Array();
for(var i = 0; i <= 8; i++)
{
squares[i] = new Array();
for(var j = (i * 20) + 1; j <= 20 * i + 20; j++)
{
if (squares[i] == null)
{
squares[i] = ''+j;
}
else
{
squares[i].push('' + j);
}
}
}
I want to get the the index from the multidimensional array when I click on a square:
angular.element('.click').click(function() {
var squareId = angular.element(this).attr('id'); //Rutans id
for(var k = 0; k <= 8; k++)
{
var squareIndex = squares[k].indexOf(squareId);
}
console.log(squareIndex);
But this only results in -1 by console.log. Anyone who can help me?
Using indexOf() you are only checking that the ID exists within that array. So if it occurs in the first array, it will continue to loop over them return -1 overwriting the previous value.
What you need to do is stop the loop when you find it and return k, the index of the array you are currently iterating through.
Here is a fiddle, hope this helps
Fiddle
var squares = new Array();
for(var i = 0; i <= 8; i++)
{
squares[i] = new Array();
for(var j = (i * 20) + 1; j <= 20 * i + 20; j++)
{
if (squares[i] == null)
{
squares[i] = ''+j;
}
else
{
squares[i].push('' + j);
}
}
}
console.log(squares);
$('a').on('click', function(){
var squareId = $(this).attr('id');
var squareIndex = 0,
numberIndex = 0;
for(var k = 0; k < squares.length; k++)
{
squareIndex = squares[k].indexOf(squareId);
if (squareIndex > -1) {
numberIndex = squareIndex;
squareIndex = k;
break
}
}
alert('NumberIndex: '+ numberIndex+' ParentSquareIndex: '+ squareIndex);
});
please see here http://plnkr.co/edit/aldjCQRchgESR7IWn367?p=preview i hope that will help.
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello !</p>
<table>
<tr ng-repeat="lines in squares track by $index ">
<td ng-repeat="nr in lines track by $index" ng-click="getMyId(nr)">{{nr}}</td>
</tr>
</table>
</body>
</html>
JS:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
var squares = [];
for(var i = 0; i <= 8; i++)
{
squares[i] = [];
for(var j = (i * 20) + 1; j <= 20 * i + 20; j++)
{
if (squares[i] === null)
{
squares[i] = ''+j;
}
else
{
squares[i].push('' + j);
}
}
}
$scope.squares = squares;
$scope.getMyId = function(id){
alert(id);
}
console.log(squares);
});
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/