I’m making a game and a function that I defined says that it’s not defined.
I looked and it said that the other person with the same issue had an extra ) somewhere but I looked and I don’t have that problem.
I don’t have anything extra that is not needed.
<DOCTYPE html>
<html>
<head>
<title>Programing Clicker</title>
<style>
h1{
color:#333;
font-family:helvetica;
font-weight: bold;
font-size:2.5em;
}
h2{
font-size:2em;
position: relative;
left:250px;
display: block;
}
h3{
font-size:1.75em;
position: relative;
left: 250px;
display: block;
}
</style>
</head>
<body>
<center>
<h1>Programing Clicker</h1>
<hr>
</center>
<h2>Skill</h2>
<h3 id="skill_show"></h3>
<h2>Money</h2>
<h3 id = "moneyShow"></h3>
<h2>Language</h2>
<br>
<br>
<p id="timer"></p>
<button onClick = "scriptMake()">Make a script</button>
<script>
var money = 1;
var skill = 1;
var language = 1;
var scriptTime = 100/skill;
var scriptTime2 = scriptTime;
function scriptMake(){
for(var x = 100,x >= 0, x += skill){
document.getElementById("timer").innerHTML = x;
}
}
setInterval(
function showvars(){
document.getElementById("skill_show").innerHTML = skill;
document.getElementById("moneyShow").innerHTML = money;
},1
)
</script>
</body>
your problem is here
for(var x = 100,x >= 0, x += skill){
You need semicolons instead of commas like so
for(var x = 100;x >= 0; x += skill){
Depending on which browser you are using to view the game, look up how to open the console in the browser. It will help you debug these things in a second.
Related
Ok so it does add, but not right
So my vars think that they are text but I want just the nums, so I can add them together.
How do I do this?
a fiddle to see whats so wrong
<html>
<head>
<title>Nose Clicker</title>
<style>
body{
background-image:url("https://i.pinimg.com/originals/66/27/70/6627703d20110ad2e8877fab5fc102b9.jpg");
}
#root-SuperGloabalVar1{
color: red;
font-size: 150px;
padding: 0px;
}
#var-wrapper{
opacity: 0%;
}
</style>
</head>
<body>
<div id = 'var-wrapper'>
<h1 class = 'vars' id = 'perclick'>
<---here is the first addend--->
1
</h1>
</div>
<---here the second one--->
<h1 id = 'root-SuperGloabalVar1'>0</h1>
<img onclick = '
<---get number 1--->
var v = getElementById("root-SuperGloabalVar1");
<---get number 2--->
var a = getElementById("perclick");
<---adding--->
var w = v.innerHTML+=a.innerHTML;
<---replacing and then it shows "01"--->
v.innerHTML(parrseint(a.innerHTML + v));
'
src = 'https://www.pngitem.com/pimgs/m/155-1559954_cartoon-nose-images-cartoon-nose- image-png-transparent.png'>
</body>
</html>
I didn't completely understand your question can you explain it a bit more and detailed but if you want to parse text into number then use
var x = a.innerHTML;
Number(x)
Edit:
And a proper way to use number increment and display it is like this:
(you don't need to save your integer in an element you can use a javascript variable)
let clicks = 0;
function countClicks() {
clicks++;
const display = document.getElementById("display");
display.innerHTML = clicks;
}
<!DOCTYPE html>
<html lang="en">
<body>
<div style="background: red; width: 100px; height: 100px;" onclick="countClicks();">
</div>
<div style="font-size: 30px;" id="display">0</div>
</body>
</html>
Example to use in onclick callback:
<body>
<script>var clicks = 0;</script>
<div style="background: red; width: 100px; height: 100px;"
onclick=
"
clicks++;
const display = document.getElementById('display');
display.innerHTML = clicks;
">
</div>
<div style="font-size: 30px;" id="display">0</div>
</body>
When I edit a content and saved changes, it shows [object CSSStyleDeclaration] instead of my updated content when refreshing the page.
function newElement() {
let li = document.createElement("li");
let inputvalue = document.querySelector("#myInput").value;
let savedNote = document.createTextNode(inputvalue);
li.appendChild(savedNote);
if (inputvalue === '') {
alert("Please write something")
} else {
document.querySelector("#myNotes").appendChild(li);
}
document.querySelector("#myInput").value = '';
}
function saveEdits() {
let editElement = document.querySelector("#saved-notes");
editElement = document.querySelector("#myNotes");
let userVersion = editElement.innerHTML;
userVersion = editElement.style;
localStorage.userEdits = userVersion;
document.querySelector("#update").innerHTML = "Edits saved. Refresh the page to see changed content";
}
function checkEdits() {
if (localStorage.userEdits != null)
document.querySelector("#saved-notes").innerHTML = localStorage.userEdits;
document.querySelector("#myNotes").style = localStorage.userEdits;
}
ul {
margin: 0;
padding: 0;
}
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
background: #eee;
font-size: 18px;
transition: 0.2s;
}
<html>
<head>
<meta charset="utf-8">
</head>
<body onload="checkEdits()">
<div id="myDiv" class="new-note">
<textarea id="myInput"></textarea><br>
<button onclick="newElement()" class="save-button">Create</button>
<button onclick="saveEdits()" class="edit-button">Save Changes</button>
</div>
<div id="update"></div>
<div id="saved-notes"></div>
<ul id="myNotes">
</ul>
</body>
</html>
It will work if I removed userVersion = editElement.style;, but there will no CSS style. Just plain text.
I want to understand why this happens and learn from it. Thanks in advance.
It's because the Function localStorage.set can only save Strings, so it will call .toString() on the Object before it get stored and the Result of it is it's type [object CSSStyleDeclaration]. Did you tried to stringify it before you safe it?
userVersion = JSON.stringify(editElement.style);
document.querySelector("#myNotes").style = JSON.parse(localStorage.userEdits);
This is the code:
<!DOCTYPE html>
<style>
h1 {
color: white;
}
body {
background-color: black;
}
.scroller {
background: linear-gradient(#94ff98, green);
}
</style>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1 align="center">Fetching data...</h1>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<meter id="prog" value="0" max="100" style="width: 100%"></meter>
<script>
setInterval(
function () {
var prog = document.getElementById("prog");
var i = 0;
i = i + 1;
prog.setAttribute("value", i)
},
10
);
</script>
</body>
</html>
Yes, I know the meter element isn't for progress bars, but im just using it merely for aesthetics and it isn't doing anything at all, really.
So why is it not updating, setinterval only runs once?
The variable declaration of i should be moved outside of the setInterval callback. The variable i is reinitialize to zero for each interval.
Also, it's better to clear the interval after i has reached 100.
Demo
var i = 0;
var interval = setInterval(function() {
var prog = document.getElementById("prog");
i = i + 1;
prog.value = i;
console.log(i);
if (i >= 100) {
clearInterval(interval);
}
}, 10);
h1 {
color: white;
}
body {
background-color: black;
}
.scroller {
background: linear-gradient(#94ff98, green);
}
<h1 align="center">Fetching data...</h1>
<br>
<br>
<meter id="prog" value="10" max="100" style="width: 100%"></meter>
Try this code It will help you
<script>
var i = 0;
var interval = setInterval(function () {
var prog = document.getElementById("prog");
i = i + 1;
prog.value = i;
console.log(i);
if (i >= 100) {
clearInterval(interval);
}
}, 35);
</script>
Your code is saying: every 10 milliseconds,
access the DOM,
1 declare a variable, assign it's value to 0,
add 1 to i (0 + 1 = 1)
then set the value of your DOM element to i (e.g 1)
The problem is that your code keeps creating a new locally scoped variable i and setting it to zero each time that function is called.
You need to move i outside the scope of your anonymous function.
My code atm looks like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Oppgave 2</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: rgb(100, 100, 100);
margin: 5px;
float: left;
}
</style>
</head>
<body>
<label>
<ul>
<li>Antall <input id="numberFigInput" type="text"></li>
</ul>
</label>
<input id="genFigBtn" type="button" value="Generate">
<input id="removeFigBtn" type="button" value="Remove All">
<section id="myFigures"></section>
<script>
var numberFig, genFigBtn, myFigures;
function init(){
numberFigInput = document.getElementById("numberFigInput");
myFigures = document.getElementById("myFigures");
genFigBtn = document.getElementById("genFigBtn");
removeFigBtn = document.getElementById("removeFigBtn");
genFigBtn.onclick = genFigures;
removeFigBtn.onclick = removeFigures;
}
function genFigures(){
var numberFig = numberFigInput.value;
if (numberFig > 0, numberFig < 1001){
for(var amount = 0; amount < numberFig; amount++){
myFigures.innerHTML += "<div></div>"
}
}else{
alert("You have to input an integer over 0, but not over 1000!");
}
}
function removeFigures(){
}
init();
</script>
</body>
</html>
So what I want, is for the remove-button to remove the divs that im creating. Ive been googling around and have tried alot of different codes, cant seem to get it to work..
In your specific situation, you have two basic choices:
Just set innerHTML on the element to "":
myFigures.innerHTML = "";
It's slower than some alternatives, but you're not doing this in a tight loop, and it's easy.
Use a loop with removeChild:
while (myFigures.firstChild) {
myFigures.removeChild(myFigures.firstChild);
}
See this other SO answer for information comparing the two techniques.
Here's that first option in context:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Oppgave 2</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: rgb(100, 100, 100);
margin: 5px;
float: left;
}
</style>
</head>
<body>
<label>
<ul>
<li>Antall <input id="numberFigInput" type="text"></li>
</ul>
</label>
<input id="genFigBtn" type="button" value="Generate">
<input id="removeFigBtn" type="button" value="Remove All">
<section id="myFigures"></section>
<script>
var numberFig, genFigBtn, myFigures;
function init(){
numberFigInput = document.getElementById("numberFigInput");
myFigures = document.getElementById("myFigures");
genFigBtn = document.getElementById("genFigBtn");
removeFigBtn = document.getElementById("removeFigBtn");
genFigBtn.onclick = genFigures;
removeFigBtn.onclick = removeFigures;
}
function genFigures(){
var numberFig = numberFigInput.value;
if (numberFig > 0, numberFig < 1001){
for(var amount = 0; amount < numberFig; amount++){
myFigures.innerHTML += "<div></div>"
}
}else{
alert("You have to input an integer over 0, but not over 1000!");
}
}
function removeFigures(){
myFigures.innerHTML = "";
}
init();
</script>
</body>
</html>
Like T.J. Crowder said,
myFigures.innerHTML = "";
would work. However, that assumes that myFigures is empty when your DOM is initially loaded. If that is NOT the case, you need to add a class to the div when you create it.
AddDiv function:
function genFigures(){
var numberFig = numberFigInput.value;
if (numberFig > 0, numberFig < 1001){
for(var amount = 0; amount < numberFig; amount++){
myFigures.innerHTML += "<div class='AddedDiv'></div>"
}
}else{
alert("You have to input an integer over 0, but not over 1000!");
}
}
To remove them:
$(".AddedDiv").each(function(){
$(this).parentNode.removeChild($(this));
});
So, what I'm hoping to do is change the text inside a set of <p> tags every half-second. The set of tags in question is in this block of code in my body:
<div class="outerdiv" id="col2">
<p id="matrixText"></p>
</div>
Right below the above code I have the JavaScript that should call a function every half-second:
<script type="text/javascript">
setInterval("changeMatrixText()", 500);
</script>
I have the function changeMatrixText defined inside my head:
function changeMatrixText()
{
var newtext = "";
for (var i = 0; i < 1000; i++)
newtext += Math.floor((Math.random()*10)+1) % 2 ? "0" : "1";
document.getElementById("matrixText").value = newtext;
}
As you see, that's supposed to set the text to a random string of 0's and 1's. But it's not working. Any idea why?
Just in case you need to see my entire code .....
<html>
<head>
<title>Simple encrypt/decrypt</title>
<style type="text/css">
body
{
background-color: #A9F5F2;
width: 900px;
padding: 0px;
}
.outerdiv
{
margin: 5px;
border: 2px solid #FF8000;
background-color: #FFFFFF;
}
.outerdiv > p
{
margin: 5px;
word-wrap:break-word
}
.outerdiv > h1
{
margin: 5px;
}
#col1
{
width: 500x;
height: 800px;
float: left;
}
#col2
{
width: 295px;
height: 1500px;
float: right;
font-family: Courier New;
overflow: hidden;
}
#title1div
{
font-family: Arial;
width: 100%;
}
#insctdiv
{
font-family: Arial;
width: 100%;
}
#iptdiv
{
height: 400px;
width: 100%;
}
#buttonsdiv
{
text-align: center;
width: 100%;
}
#inputText
{
width: 100%;
height: 100%;
resize: none;
}
</style>
<script type="text/javascript">
function encrypt()
{
var text = document.getElementById("inputText").value;
newstring = "";
/* Make newstring a string of the bit representations of
the ASCII values of its thisCharacters in order.
*/
for (var i = 0, j = text.length; i < j; i++)
{
bits = text.charCodeAt(i).toString(2);
newstring += new Array(8-bits.length+1).join('0') + bits;
}
/* Compress newstring by taking each substring of 3, 4, ..., 9
consecutive 1's or 0's and it by the number of such consecutive
thisCharacters followed by the thisCharacter.
EXAMPLES:
"10101000010111" --> "10101401031"
"001100011111111111111" --> "0011319151"
*/
newstring = newstring.replace(/([01])\1{2,8}/g, function($0, $1) { return ($0.length + $1);});
document.getElementById("inputText").value = newstring;
}
function decrypt()
{
var text = document.getElementById("inputText").value;
text = text.trim();
text.replace(/([2-9])([01])/g,
function (all, replacementCount, bit) {
return Array(+replacementCount + 1).join(bit);
}).split(/(.{8})/g).reduce(function (str, byte) {
return str + String.fromCharCode(parseInt(byte, 2));
}, "");
document.getElementById("inputText").value = text;
}
function changeMatrixText()
{
var newtext = "";
for (var i = 0; i < 1000; i++)
newtext += Math.floor((Math.random()*10)+1) % 2 ? "0" : "1";
document.getElementById("matrixText").value = newtext;
}
</script>
</head>
<body>
<div id="col1">
<div class="outerdiv" id="title1div">
<h1>Reversible text encryption algorithm</h1>
</div>
<div class="outerdiv" id="insctdiv">
<p>Type in or paste text below, then click <b>Encrypt</b> or <b>Decrypt</b></p>
</div>
<div class="outerdiv" id="iptdiv">
<textarea id="inputText" scrolling="yes"></textarea>
</div>
<div class="outerdiv" id="buttonsdiv">
<button onclick="encrypt()"><b>Encrypt</b></button>
<button onclick="decrypt()"><b>Decrypt</b></button>
</div>
</div>
<div class="outerdiv" id="col2">
<p id="matrixText"></p>
</div>
<script type="text/javascript">
setInterval("changeMatrixText()", 500);
</script>
</body>
</html>
In essence, I'm trying to make the right column of my page keep printing inside a new string of 0's and 1's every half-second, kinda like on the computer screen on the movie The Matrix, if you catch my drift.
According to MDN, the elements with a value attribute include <button>, <option>, <input>, <li>, <meter>, <progress>, and <param>. You'll need to set the innerHTML instead.
document.getElementById("matrixText").value = newtext;
to
document.getElementById("matrixText").innerHTML = newtext;
and
setInterval("changeMatrixText()", 500);
to
setInterval(changeMatrixText, 500);
Working Demo
document.getElementById("matrixText").value = newtext;
.value is used for form fields instead use
document.getElementById("matrixText").innerHTML = newtext;
in your changeMatrixText function
Here's an example of how you can do this:
http://jsfiddle.net/35W4Z/
The main difference is that a <p> element doesn't have a .value attribute. Instead, use the innerHTML attribute (as shown in the JSFiddle example)
Hope this helps!
Well for fun, I stuck this in a fiddle: http://jsfiddle.net/jdmA5/1/
So two things, mostly:
1) You can't set the "value" of a div element. You have to set the .innerHTML:
document.getElementById("matrixText").innerHTML = newtext;
2) This could be due to the fact I built this out in fiddle, but setInterval is notorious for not running like you expect unless you give each iteration its own memory space. I did this by wrapping the call to changeMatrix in a anonymous function:
setInterval(function() {changeMatrixText();}, 500);
Check out the jsfiddle link to see it in action.
Have you tried changing the setInterval method to accept the first argument as the function itself (the name, minus the parentheses), rather than a string...
As you are not passing any parameters explicitly, you can invoke the function as follows:
setInterval(changeMatrixText, 500);
Should you have needed to supply some parameters, then the following would work:
setInterval(function() {
changeMatrixText(myParam1, myParam2); // etc, etc
}, 500);