UPDATE: SOLVED! line 116 (ERROR3) had to be changed from 'parseInst(rom[i]); ' to 'rom[i]; '.
I'm working on an assembly simulator in Javascript. For some reason the JUMP instruction messes up the register contents. The following program (can be copy-pasted) increments register 'A' (0-->1) then jumps to instruction 0. Instead of '1', the register's content becomes a value over 5000. What am I doing wrong? UPDATE: added three errors caught by the debugger ("Uncaught RangeError: Maximum call stack size exceeded").
var regA = 0;
var regB = 0;
var accu = 0;
var rom = [];
var instCount = 0;
var flag1 = 0;
var stopState = 0;
function eval() {
var inst = document.getElementById("text_f").value;
parseInst(inst);
};
function parseInst(instString) {
if (instString.includes("LDA")) { //ERROR1
var strSplitA = instString.split(":");
regA = parseInt(strSplitA[1]);
document.getElementById("regA").innerHTML = regA;
instCount++;
document.getElementById("demo").innerHTML = "load register A: " + strSplitA[1]+"type of: "+typeof regA;
} else if (instString.includes("LDB")) {
var strSplitB = instString.split(":");
document.getElementById("demo").innerHTML = "load register B: " + strSplitB[1];
regB = parseInt(strSplitB[1]);
document.getElementById("regB").innerHTML = regB;
instCount++;
} else if (instString == "ADD") {
accu = regA + regB;
document.getElementById("demo").innerHTML = "add " + regA + "+" + regB + "=" + accu;
document.getElementById("accu").innerHTML = accu;
instCount++;
} else if (instString.includes("JMP")) {
var jumpTo = instString.split(":");
instCount = parseInt(jumpTo[1]);
document.getElementById("demo").innerHTML = "jump to: " + instCount+" typeof: "+typeof instCount;
document.getElementById("count").innerHTML = instCount;
runStop(stopState,parseInt(jumpTo[1])); //ERROR2
} else if (instString == "CMP") {
if (regA === regB) {
flag1 = 1;
instCount++;
document.getElementById("flag1").innerHTML = 1;
document.getElementById("demo").innerHTML = "flag1 set to 1";
} else {
flag1 = 0;
instCount++;
document.getElementById("flag1").innerHTML = 0;
document.getElementById("demo").innerHTML = "flag1 set to 0";
};
} else if (instString.includes("INC")) {
var incRegister = instString.split(":");
switch (incRegister[1]) {
case "A":
regA++;
document.getElementById("demo").innerHTML = "case A";
document.getElementById("regA").innerHTML = regA;
instCount++;
break;
case "B":
regB++;
document.getElementById("demo").innerHTML = "case B";
document.getElementById("regB").innerHTML = regB;
instCount++;
break;
default:
document.getElementById("demo").innerHTML = "error: register name";
break;
}
} else {
document.getElementById("demo").innerHTML = "error: no instruction";
};
};
function saveToRom() {
var romString = document.getElementById("text_f").value;
rom = romString.split(",");
document.getElementById("rom").innerHTML = rom;
document.getElementById("demo").innerHTML = "#debug:save to rom";
reset();
};
function step() {
parseInst(rom[instCount]);
document.getElementById("count").innerHTML = instCount-1;
};
function run() {
stopState = 0;
document.getElementById("demo").innerHTML = "run";
runStop(stopState,instCount);
};
function stop(){
stopState = 1;
document.getElementById("demo").innerHTML = "stop";
runStop(stopState,instCount);
};
function runStop(stopSt,instructionCount){
if(stopSt == 0){
for(var i=instructionCount;i<rom.length;i++){
parseInst(rom[i]); //ERROR3
document.getElementById("demo").innerHTML = "#runStop(): stopState: "+stopState+" for loop length: " + rom.length;
}
} else {
document.getElementById("demo").innerHTML = "#runStop(): stopState: "+stopState;
};
};
function reset() {
document.getElementById("demo").innerHTML = "debug: reset";
regA = 0;
regB = 0;
accu = 0;
flag1 = 0;
instCount = 0;
document.getElementById("regA").innerHTML = regA;
document.getElementById("regB").innerHTML = regB;
document.getElementById("accu").innerHTML = accu;
document.getElementById("count").innerHTML = instCount;
document.getElementById("flag1").innerHTML = flag1;
};
The full source code with HTML on Github.
I appreciate your help in advance! EDIT: The html code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>COMPU</title>
<script type='text/javascript' src='comp3.1.js'></script>
<link rel="stylesheet" type="text/css" href="stylesheet_comp.css">
</head>
<body>
<input type="text" id="text_f" value=" " autofocus>
<br><br>
<div class="nav">
<button onclick="eval()">EXEC</button>
<button onclick="saveToRom()">SAVE</button>
<button onclick="reset()">RST</button>
<button onclick="step()">STEP</button>
<button onclick="run()">RUN</button>
<button id="stop" value=0 onclick="stop()">STOP</button>
</div>
<br>
<div class="displays">
DEBUG:
<p id="demo">*debugging messages*</p>
REG A:
<p id="regA">0</p>
REG B:
<p id="regB">0</p>
ACCU:
<p id="accu">0</p>
<br> ROM:
<p id="rom"></p>
INS COUNT:
<p id="count">0</p>
FLAG1:
<p id="flag1">0</p>
<!--
DEBUG2:
<p id="dbg2"></p>
-->
</div>
INSTRUCTIONS:
<ol>
<li>ADD</li>
</ol>
</body>
</html>
UPDATE: SOLVED! line 116 (ERROR3) had to be changed from 'parseInst(rom[i]); ' to 'rom[i]; '.
Related
I'm building a small quiz app, and want to display the user score on a different html page immediately the user finished answering the questions. what am getting right now the user finish answering the questions the in which the score is suppose to display loads and open without the score displayed.
`
<body>
<div class="quiz-title">
<h1>JS Quiz</h1>
</div>
<div class="container">
<h2 id="score-board">00</h2>
<div id="questions"></div>
<div id="answers">
</div>
<button type="submit"class="nbtn">Play</button>
</div>
<script src="quiz.js"></script>
<!-- <script type="text/javascript" src="quiz1.js"></script> -->
</body>
the page to display the score
<body>
<h2 id="score-board">00</h2>
<div>
<button id="play-btn">play</button>
</div>
<script src="quiz.js"></script>
<!-- <script type="text/javascript" src="quiz1.js"></script> -->
</body>
var questionElement = document.getElementById('questions');
var answerElement = document.getElementById('answers');
var scoreBoard = document.querySelector('#score-board');
const state = {
currentQuestionIndex: 0,
score: 0
};
var questions = [
{ question: " 1. javaScript is an....... language?",
answers: [ "object-oriented", "object-based", "procedural", "none of the above"],
correct: 1
},
{ question: " 2.which of the following keywords is used a define variable in javaScript",
answers: [ "var", "let", "both A and B", "none of the above"],
correct: 2
},
{
question: "3. which of the following methods is used to HTML elements using javaScript",
answers: ["getElementsById", "getElementByClassName", "both A and B", "none of the above"] ,
correct: 2
}
];
function showQuestion(questionIndex){
const question = questions[questionIndex];
let qDiv = document.createElement('div');
let p = document.createElement('p');
questionElement.innerHTML = "";
answerElement.innerHTML = "";
p.textContent = question.question;
qDiv.appendChild(p);
questionElement.appendChild(qDiv);
question.answers.forEach((answers, answerIndex) =>{
const $input = document.createElement('input');
const $label = document.createElement('label');
$label.appendChild($input);
$label.appendChild(document.createTextNode(answers));
$input.name = `question${questionIndex}`;
$input.type = 'radio';
$input.value = answerIndex;
answerElement.append($label);
// if ($input.checked === false) {
// console.log('select answer');
// } else{
// showQuestion(state.currentQuestionIndex);
// }
});
};
showQuestion(0);
var nBtn = document.querySelector('.nbtn');
nBtn.addEventListener('click', function(){
state.currentQuestionIndex += 1;
if (state.currentQuestionIndex === questions.length) {
removeLastQuestion();
scorePage();
showScores();
} else{
showQuestion(state.currentQuestionIndex)
}
});
const $answers = document.getElementById("answers");
$answers.addEventListener("change", (event) => {
const currentQuestion = questions[state.currentQuestionIndex];
const selectedAnswerIndex = Number(event.target.value);
const correctAnswerIndex = currentQuestion.correct;
const isCorrect = selectedAnswerIndex === correctAnswerIndex;
state.score += isCorrect ? 1 : 0;
// if (isCorrect) {
// var scoreBoard = document2.querySelector('.score-board');
// // scoreBoard.textContent = state.score;
// // console.log("correct answer");
// } else {
// var scoreBoard = document.querySelector('.score-board');
// // scoreBoard.textContent = state.score += 0;
// // console.log("wrong answer");
// }
});
function showScores() {
if (state.currentQuestionIndex === questions.length) {
scoreBoard.innerHTML = `${state.score}/${questions.length}`
}
}
function removeLastQuestion(){
if (state.currentQuestionIndex > questions.length - 1) {
questionElement.innerHTML = "";
answerElement.innerHTML = "";
}
}
function scorePage() {
if (state.currentQuestionIndex > questions.length -1) {
window.location.href = 'index23.html';
// scoreBoard = document.querySelector('#score-board');
// scoreBoard.innerText = `${state.score}/${questions.length}`;
}
}
// const playBtn = document.querySelector('#play-btn');
// playBtn.addEventListener('click', showQuestion);
`
So I have this little problem with my if else structure. When I put in a correct star for example "Vega", the costellation shows me that it is false ("Error") while it needs to show me "Lyra".
My code is below:
var stars = ["Polaris", "Aldebaran", "Deneb", "Vega", "Altair", "Dubhe", "Regulus"];
var costellations = ["Ursu Minor", "Taurus", "Cygnus", "Lyra", "Aquila", "Ursa Major","Leo"];
function Arrays() {
for (n = 0; n < 7; ++n) {
if (test.inputStars.value == stars[n]) {
test.inputCostellations.value = costellations[n];
}else{
test.inputCostellations.value = "Error";
}
}
}
<!DOCTYPE html>
<html>
<head>
<title> Array structures</title>
</head>
<body>
<form name = "test">
<input type = "text" name = "inputStars">
<input type = "button" onclick ="Arrays()" value = "Find costellation">
<input type = "text" name = "inputCostellations">
</form>
</body>
</html>
The problem is, when the for loop is running, the test.inputConstellations.value will be overridden, even if previously the program found a match. The solution is the break:
if(test.inputStars.value==stars[n]){
test.inputConstellations.value=constellations[n]
break
}else{
test.inputCostellations.value = "Error"
}
var stars = ["Polaris", "Aldebaran", "Deneb", "Vega", "Altair", "Dubhe", "Regulus"];
var costellations = ["Ursu Minor", "Taurus", "Cygnus", "Lyra", "Aquila", "Ursa Major","Leo"];
function Arrays() {
for (n = 0; n < 7; ++n) {
if (test.inputStars.value == stars[n]) {
test.inputCostellations.value = costellations[n];
break
}else{
test.inputCostellations.value = "Error";
}
}
}
<!DOCTYPE html>
<html>
<head>
<title> Array structures</title>
</head>
<body>
<form name = "test">
<input type = "text" name = "inputStars">
<input type = "button" onclick ="Arrays()" value = "Find costellation">
<input type = "text" name = "inputCostellations">
</form>
</body>
</html>
You can set a default value for variable and overwrite when true:
var stars = ["Polaris", "Aldebaran", "Deneb", "Vega", "Altair", "Dubhe", "Regulus"];
var costellations = ["Ursu Minor", "Taurus", "Cygnus", "Lyra", "Aquila", "Ursa Major","Leo"];
function Arrays() {
test.inputCostellations.value = "Error";
for (n = 0; n < 7; ++n) {
if (test.inputStars.value == stars[n]) {
test.inputCostellations.value = costellations[n];
}
}
}
And use a break:
var stars = ["Polaris", "Aldebaran", "Deneb", "Vega", "Altair", "Dubhe", "Regulus"];
var costellations = ["Ursu Minor", "Taurus", "Cygnus", "Lyra", "Aquila", "Ursa Major","Leo"];
function Arrays() {
test.inputCostellations.value = "Error";
for (n = 0; n < 7; ++n) {
if (test.inputStars.value == stars[n]) {
test.inputCostellations.value = costellations[n];
break;
}
}
}
I've been working on my own project for a little bit, and I'm currently working on adding another button in. Now I've set it up pretty similar to the other ones, but it isn't working when I press it. For my code, the firstx2, secondx2, and first building buttons all work fine, But when you try and click on the second building button, it doesn't do anything. I probably made a small typo or missed a line, but I can't seem to find it anywhere. To get to the second building button, you have to have already clicked on both multipliers and the first building. Thanks for your help!
<!DOCTYPE html>
<html>
<body>
<p>Click to get started!</p>
<button onclick="addPoints()">Add points</button>
<button id="btn_multiply" onclick="firstx2()" style="display:none;">x2 Multiplier. Cost: 100</button>
<button id="firstbuild" onclick="build1()" style="display:none;">Building 1. Cost x</button>
<button id="multiply2" onclick="secondx2()" style="display:none;">x2 Multiplier. Cost: 1000</button>
<button id="secondbuild" onlcick="build2()" style="display:none;">Building 2. Cost x</button>
<script>
var points = 10099;
var pointMulti = 1;
var buyupgrade = 0;
var b1cost = 200;
var b1count = 0;
var b2cost = 1000;
var b2count = 0;
var currentpoints = setInterval(pointupdate, 500);
function addPoints() {
points += pointMulti;
var pointsArea = document.getElementById("pointdisplay");
pointsArea.innerHTML = "You have " + Math.round(points) + " points!";
if(points >= 100 && buyupgrade == 0) {
var multiply_button = document.getElementById("btn_multiply");
multiply_button.style.display = "inline";
}
}
function firstx2() {
if (buyupgrade == 0) {
pointMulti *= 2;
buyupgrade++;
points -= 100;
var multiplierArea = document.getElementById("multidisplay");
multiplierArea.innerHTML = "Your multiplier is: " + pointMulti;
var multiply_button = document.getElementById("btn_multiply");
multiply_button.style.display = "none";
if (buyupgrade == 1) {
var firstbuild = document.getElementById("firstbuild");
firstbuild.style.display = "inline";
firstbuild.innerText = "Building 1. Cost " + b1cost;
var show2ndx2 = document.getElementById("secondx2");
multiply2.style.display = "inline";
}
}
}
function pointupdate() {
document.getElementById("pointdisplay").innerHTML = "You have " + Math.round(points) + " points!";
}
function build1() {
if (points >= b1cost) {
points -= b1cost;
b1count++;
b1cost *= 1.10;
document.getElementById("b1").innerHTML = "You have " + b1count + " of building 1!"
firstbuild.innerText = "Building 1. Cost " + Math.round(b1cost);
var build1add = setInterval(build1points, 1000);
var secondbuild = document.getElementById("secondbuild");
secondbuild.style.display = "inline";
secondbuild.innerText = "Building 2. Cost " + b2cost;
}
}
function build2() {
if (points >= b2cost) {
points -= b2cost;
b2count++;
b2cost *= 1.10;
document.getElementById("b2").innerHTML = "You have " + b2count + " of building 2!"
secondbuild.innerText = "Building 2. Cost " + Math.round(b2cost);
var build2add = setInterval(build2points, 1000);
}
}
function build1points() {
points += 1;
}
function build2points() {
points += 4;
}
function secondx2() {
if (buyupgrade == 1 && points >= 1000) {
pointMulti *= 2;
points -= 1000;
document.getElementById("multidisplay").innerHTML = "Your multiplier is: " + pointMulti;
multiply2.style.display = "none";
}
}
</script>
<p id="pointdisplay"></p>
<p id="multidisplay"></p>
<p id="b1"></p>
<p id="b2"></p>
</body>
</html>
it should be onclick not onlcick in <button id="secondbuild" onlcick="build2()" style="display:none;">Building 2. Cost x</button>
<!DOCTYPE html>
<html>
<body>
<p>Click to get started!</p>
<button onclick="addPoints()">Add points</button>
<button id="btn_multiply" onclick="firstx2()" style="display:none;">x2 Multiplier. Cost: 100</button>
<button id="firstbuild" onclick="build1()" style="display:none;">Building 1. Cost x</button>
<button id="multiply2" onclick="secondx2()" style="display:none;">x2 Multiplier. Cost: 1000</button>
<button id="secondbuild" onclick="build2()" style="display:none;">Building 2. Cost x</button>
<script>
var points = 10099;
var pointMulti = 1;
var buyupgrade = 0;
var b1cost = 200;
var b1count = 0;
var b2cost = 1000;
var b2count = 0;
var currentpoints = setInterval(pointupdate, 500);
function addPoints() {
points += pointMulti;
var pointsArea = document.getElementById("pointdisplay");
pointsArea.innerHTML = "You have " + Math.round(points) + " points!";
if(points >= 100 && buyupgrade == 0) {
var multiply_button = document.getElementById("btn_multiply");
multiply_button.style.display = "inline";
}
}
function firstx2() {
if (buyupgrade == 0) {
pointMulti *= 2;
buyupgrade++;
points -= 100;
var multiplierArea = document.getElementById("multidisplay");
multiplierArea.innerHTML = "Your multiplier is: " + pointMulti;
var multiply_button = document.getElementById("btn_multiply");
multiply_button.style.display = "none";
if (buyupgrade == 1) {
var firstbuild = document.getElementById("firstbuild");
firstbuild.style.display = "inline";
firstbuild.innerText = "Building 1. Cost " + b1cost;
var show2ndx2 = document.getElementById("secondx2");
multiply2.style.display = "inline";
}
}
}
function pointupdate() {
document.getElementById("pointdisplay").innerHTML = "You have " + Math.round(points) + " points!";
}
function build1() {
if (points >= b1cost) {
points -= b1cost;
b1count++;
b1cost *= 1.10;
document.getElementById("b1").innerHTML = "You have " + b1count + " of building 1!"
firstbuild.innerText = "Building 1. Cost " + Math.round(b1cost);
var build1add = setInterval(build1points, 1000);
var secondbuild = document.getElementById("secondbuild");
secondbuild.style.display = "inline";
secondbuild.innerText = "Building 2. Cost " + b2cost;
}
}
function build2() {
if (points >= b2cost) {
points -= b2cost;
b2count++;
b2cost *= 1.10;
document.getElementById("b2").innerHTML = "You have " + b2count + " of building 2!"
secondbuild.innerText = "Building 2. Cost " + Math.round(b2cost);
var build2add = setInterval(build2points, 1000);
}
}
function build1points() {
points += 1;
}
function build2points() {
points += 4;
}
function secondx2() {
if (buyupgrade == 1 && points >= 1000) {
pointMulti *= 2;
points -= 1000;
document.getElementById("multidisplay").innerHTML = "Your multiplier is: " + pointMulti;
multiply2.style.display = "none";
}
}
</script>
<p id="pointdisplay"></p>
<p id="multidisplay"></p>
<p id="b1"></p>
<p id="b2"></p>
</body>
</html>
I think you should check your button(secondbuild)
the keyword onclick is wrong
Spelling Mistake. onclick not oncilck.
<button id="secondbuild" onlcick="build2()" style="display:none;">Building 2. Cost x</button> <script>
i'm working on my JavaScript skills and this is my first program trial here.
Everything was going quite well for me, but i'm stuck on this problem for about 3 days now and i guess there is something i don't get over here.
Well, diving in - i have 2 separate "Training Fields" - each has it's own "Train" button (onclick function) , "Level up" button (onclick function) and progress bar.
The problem is that the higher "Training Field" will progress the lower progress bar and not it's own.
Help will be appreciated! thx
//ignore this line, it's for me for testing
document.getElementById('hideMe').style.visibility = 'hidden';
/*========================================
Javascript for first set
========================================*/
var bodyTotal = 0;
var totalBodyCost = 0;
var bodyCost = 100;
var amountLoaded = 1;
function buyBody(){
bodyCost = totalBodyCost + Math.floor(100 * Math.pow(1.1,bodyTotal));
if(amountLoaded >= bodyCost){
totalBodyCost += bodyCost;
bodyTotal = bodyTotal + 1;
document.getElementById('bodyTotal').innerHTML = bodyTotal;
var finalMessage = document.getElementById('bodyFinalMessage').style.visibility = 'hidden';
amountLoaded = 0;
};
var nextCost = totalBodyCost + Math.floor(100 * Math.pow(1.1,bodyTotal));
document.getElementById('bodyCost').innerHTML = nextCost;
document.getElementById("bodyProgressBar").max = nextCost;
bodyCost = nextCost;
progressBarSim(amountLoaded);
};
function progressBarSim(al) {
var bar = document.getElementById('bodyProgressBar');
var status = document.getElementById('bodyStatus');
status.innerHTML = al+"/" +bodyCost;
bar.value = al;
al++;
var sim = "progressBarSim("+al+")";
}
function trainBody(){
progressBarSim(amountLoaded);
if(amountLoaded < bodyCost){
amountLoaded++;
}else{
var finalMessage = document.getElementById('bodyFinalMessage').style.visibility = 'visible';
finalMessage.innerHTML = "";
}
};
/*=============================================*/
/*========================================
Javascript for second set
========================================*/
var mindTotal = 0;
var totalMindCost = 0;
var mindCost = 100;
var amountLoaded = 1;
function buyMind(){
mindCost = totalMindCost + Math.floor(100 * Math.pow(1.1,mindTotal));
if(amountLoaded >= mindCost){
totalMindCost += mindCost;
mindTotal = mindTotal + 1;
document.getElementById('mindTotal').innerHTML = mindTotal;
var finalMessage = document.getElementById('mindFinalMessage').style.visibility = 'hidden';
amountLoaded = 0;
};
var nextCost = totalMindCost + Math.floor(100 * Math.pow(1.1,mindTotal));
document.getElementById('mindCost').innerHTML = nextCost;
document.getElementById("mindProgressBar").max = nextCost;
mindCost = nextCost;
progressBarSim(amountLoaded);
};
function progressBarSim(al) {
var bar = document.getElementById('mindProgressBar');
var status = document.getElementById('mindStatus');
status.innerHTML = al+"/" +mindCost;
bar.value = al;
al++;
var sim = "progressBarSim("+al+")";
}
function trainMind(){
progressBarSim(amountLoaded);
if(amountLoaded < mindCost){
amountLoaded++;
}else{
var finalMessage = document.getElementById('mindFinalMessage').style.visibility = 'visible';
finalMessage.innerHTML = "";
}
};
/*=============================================*/
<html>
<head>
<link rel="stylesheet" type="text/css" href="interface.css" />
</head>
<body>
<div style="float:right">
Body Level: <span id="bodyTotal">0</span>
<button onclick="trainBody()">Train Body</button><br>
<progress id="bodyProgressBar" value="0" max="100" style="width:200px; float:left;"></progress>
<span id="bodyStatus" style="float:left; z-index:555; margin-left:-110px;">0/100</span>
<button id="bodyFinalMessage" style="float:left; visibility:hidden" onclick="buyBody()">Body Level Up</button>
<br><br>
Mind Level: <span id="mindTotal">0</span>
<button onclick="trainMind()">Train Mind</button><br>
<progress id="mindProgressBar" value="0" max="100" style="width:200px; float:left;"></progress>
<span id="mindStatus" style="float:left; z-index:555; margin-left:-110px;">0/100</span>
<button id="mindFinalMessage" style="float:left; visibility:hidden" onclick="buyMind()">Mind Level Up</button>
</div>
<div id="hideMe" style="position:absolute; top:400; left:400">
Body Cost: <span id="bodyCost">100</span><br>
Mind Cost: <span id="mindCost">100</span>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
You are reassigning variables and functions using the exact same names amountLoaded, progressBarSim(al).
Because body and mind behavior are very similar you could use a module pattern (http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html) to use the same variable and function names within their own scopes.
<button onclick="Body.onClick()">Body</button>
<button onclick="Mind.onClick()">Mind</button>
And in your script file
var Body = (function() {
var me = {};
me.onClick = function() {
console.log("body click");
progressBar(al);
};
function progressBar(al) {
}
return me;
})();
var Mind = (function() {
var me = {};
me.onClick = function() {
console.log("mind click");
progressBar(al);
};
function progressBar(al) {
}
return me;
})();
The gotcha here is you can't use body with the inline onclick since that already refers to the body element.
I´m playing with DOM and JS.
Can someone show me an hint how to get the images NEXT TO EACH OTHER, not overwrite..
like: randomnumberimage1 randomnumberimage2 randomnumberimage3 etc...
<html>
<head>
<meta charset="utf-8" />
<title>Söka Tärning</title>
</head>
<body>
<p>Klicka för att fylla på arrayen med slumptal.</p>
<button onclick="slumpatal()">Slumpa</button>
<button onclick="sortering()">Sortera Högsta--->Lägsta</button>
<button onclick="hittanummer(3)">Hitta 3:or</button>
<p id="allatal"></p>
<p id="vinst"></p>
<p id="sokt_tal"></p>
<img id="tarningsbilder" src="bild1.png" alt="tärning" />
<img id="helavektorn" src="bild1.png" alt="tärning" />
<script>
var alla_tal_i_vektorn = [];
var antal_sökta_tal = 0;
function slumpatal() {
document.getElementById("vinst").innerHTML = "";
slumptal = Math.floor(Math.random() * 3) + 1;
alla_tal_i_vektorn.push(slumptal);
for (var i = 0; i < alla_tal_i_vektorn.length; i++) {
document.getElementById("tarningsbilder").src = "bild" + alla_tal_i_vektorn[i] + ".png";
}
document.getElementById("allatal").innerHTML = alla_tal_i_vektorn;
document.getElementById("tarningsbilder").src = "bild" + slumptal + ".png";
if (slumptal == 3)
document.getElementById("vinst").innerHTML = "en trea yieppie!!";
}
function sortering() {
alla_tal_i_vektorn.sort(function (a, b) { return b - a });
document.getElementById("vinst").innerHTML = alla_tal_i_vektorn;
}
function hittanummer(sökt_tal) {
antal_sökta_tal = 0;
for (var i = 0; i < alla_tal_i_vektorn.length; i++) {
if (alla_tal_i_vektorn[i] == sökt_tal)
antal_sökta_tal += 1;
}
document.getElementById("sokt_tal").innerHTML = "det fanns " + antal_sökta_tal + "st treor!";
}
</script>
</body>
</html>
Thanks in advance for all kind of help
Regards
Tha Pig
Find a snice solution by myself..! Her´s the code:
Söka och sortera tärning Klicka för att fylla på arrayen med slumptal.
<button onclick="myFunction()">Slumpa</button>
<button onclick="sortering()">Sortera Högsta-->Lägsta</button>
<button onclick="findById(3)">Hitta 3:or</button>
<p id="demo"></p>
<p id="vinst"></p>
<p id="sokt_tal"></p>
<script>
var all_numbers = [];
**var alla_bilder = [];**
var nums = 0;
function myFunction() {
document.getElementById("vinst").innerHTML = "";
slumptal = Math.floor(Math.random() * 3) + 1;
all_numbers.push(slumptal);
***alla_bilder.push("<img src=bild" + slumptal + ".png\>");***
**document.getElementById("demo").innerHTML = alla_bilder;**
document.getElementById("demo").src = "bild" + slumptal + ".png";
if (slumptal == 3)
document.getElementById("vinst").innerHTML = "en trea yieppie!!";
}
function sortering() {
all_numbers.sort(function (a, b) { return b - a });
document.getElementById("vinst").innerHTML = all_numbers;
}
function findById(num) {
nums = 0;
for (var i = 0; i < all_numbers.length; i++) {
if (all_numbers[i] == num)
nums += 1;
}
document.getElementById("sokt_tal").innerHTML = "det fanns " + nums + "st treor!";
}
</script> </body> </html>
Thanks
Tha Pig
Javascript
node.parentNode.childNodes[]
or
JQUERY
$('selector').siblings()
After you get the sibling you can check the element node is img.