So I'm using the PokeAPI to fetch the name of a Pokemon, then shuffling that name, and the user is supposed to guess what it is in the input. If they don't know then they can click the next button and it reshuffles a new mon. If they guess right they can press the same next button for a new mon. Each time they guess right the score increases by 1. That's working but I cant figure out why the out of/total games span isn't updating as well. Please excuse my terrible attempt at JS I'm very new if you can help me make my code look better that would be great.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<title>Who's that Pkmn?</title>
</head>
<body>
<header>
<h1>Who's that Pokemon?!</h1>
</header>
<div id="jumble">?????</div>
<div class="container">
<input id="guess" type="text" placeholder="enter pkmn name" />
<button id="submit" class="btn" type="submit">go</button>
<button id="next" class="btn">next</button>
<p id="msg">unshuffle the letters</p>
</div>
<div id="scorekeepers">
<p>Score: <span id="score">0</span>
out of: <span id="gamesPlayed">0</span></p>
</div>
<script src="script.js"></script>
</body>
</html>
let jumbledName = document.querySelector("#jumble");
let guessInput = document.querySelector('#guess')
let submitButton = document.querySelector('#submit')
let nextButton=document.querySelector('#next')
let messageDisplay = document.querySelector('#msg')
let score = document.querySelector('#score')
let gamesPlayed = document.querySelector('#gamesPlayed')
score = 0;
gamesPlayed = 0;
let getPokemonName = function() {
fetch(`https://pokeapi.co/api/v2/pokemon/${Math.floor(Math.random()*151+1)}/`)
.then(function(response) {
return response.json();
})
.then(function(data) {
const pokeName = data.name;
const pokeNameJumbled = pokeName.shuffle();
displayInfomation(pokeName, pokeNameJumbled);
});
};
getPokemonName();
guessInput.value=''
// pokeNameJumbled=''
const displayInfomation = function(name, jumbledName) {
pokeName = name;
pokeNameJumbled = jumbledName;
jumble.textContent = jumbledName;
};
const displayMessage = function(message) {
document.querySelector("#msg").textContent = message;
};
const checkName = function () {
document.querySelector("#guess").textContent = guessInput;
const guess = document.querySelector("#guess").value.toLowerCase();
if (!guess) {
displayMessage("No guess entered!");
} else if (guess === pokeName) {
displayMessage(`Thats correct! It's ${pokeName}!`)
score++
document.querySelector("#score").textContent = score;
guessInput.value=''
} else if (guess != pokeName) {
displayMessage(`Wrong!`);
document.querySelector("#gamesPlayed").textContent = gamesPlayed;
}
};
submitButton.addEventListener('click', checkName)
nextButton.addEventListener('click',getPokemonName)
String.prototype.shuffle = function() {
var a = this.split(""),
n = a.length;
for (var i = n - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var tmp = a[i];
a[i] = a[j];
a[j] = tmp;
}
return a.join("");
};
I am using mPDF and other library for generating PDF/ Image from HTML code or file. below I have mentioned my HTML code from which need to generate .JPG or .PNG or .PDF
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="http://codeclippers.xyz/320x50/app.min.css" />
</head>
<body>
<div id="addsp320x50"></div>
</body>
<script src="http://codeclippers.xyz/320x50/app.min.js"></script>
<script type="text/javascript">
var availbleTitles = ["title1", "title2", "title3", "title"];
var availableVsprite =["https:\/\/dspbanners.s3.amazonaws.com\/creatives\/user_creatives_5f843d6b40d48_1602501995.jpeg", "https:\/\/dspbanners.s3.amazonaws.com\/creatives\/user_creatives_5f843d6b7e2b0_1602501995.jpeg"];
var availableVicons = [""];
var availbleBasicOptions = [""];
var availbleDescription = [""];
var selectedVsprite = availableVsprite[Math.floor(Math.random() * availableVsprite.length)];
var selectedVicons = availableVicons[Math.floor(Math.random() * availableVicons.length)];
var selectedTitles = availbleTitles[Math.floor(Math.random() * availbleTitles.length)];
var selectedDescription = availbleDescription[Math.floor(Math.random() * availbleDescription.length)];
var selectedBasicOpt = availbleBasicOptions[Math.floor(Math.random() * availbleBasicOptions.length)];
cOptions.isAnimated = true;
cOptions.animatedVariation = "vinfinite-scroll";
cOptions.titleText = selectedTitles;
cOptions.animationOptions[0].verticalInfiniteAnimation[0].backgroundSpriteURL = selectedVsprite;
if(selectedVicons != "") {
cOptions.animationOptions[0].verticalInfiniteAnimation[0].showIcon = true;
cOptions.animationOptions[0].verticalInfiniteAnimation[0].actionIconImage = selectedVicons;
}
cOptions.descrptionText = selectedDescription;
for(const [key, value] of Object.entries(selectedBasicOpt)) {
if(typeof value === 'boolean') {
cOptions[key] = value;
} else {
cOptions[key] = value.replace(/"/g, "").trim()
}
}
renderCreative();
</script>
</html>
Thanks in advance
I have some basic html below, and for some reason it's not recognizing the js file I linked in the script tag. Am I linking it incorrectly in some way?:
<html>
<head>
<link rel="stylesheet" src="/index.css">
<script src="/index.js"></script>
</head>
<body>
<div id="board">
<svg id="svg"></svg>
</div>
</body>
</html>
Below is the respective index.js:
const grid = [
[{},{},{},{},{},{},{}],
[{},{},{},{},{},{},{}],
[{},{},{},{},{},{},{}],
[{},{},{},{},{},{},{}],
[{},{},{},{color: "red"},{color:"black"},{},{}],
];
const render = () =>{
console.info("rendering?")
const svg = document.getElementById("svg");
let doc = ``;
for (var i=0; i<grid.length; i++) {
var row = grid[i];
for (var j=0; j<row.length; j++){
const square = grid[i][j];
const color = square && square.color || 'gray';
doc = doc + `<circle onclick="clickSquare(${i}, ${j})" fill = '${color}' r='30px' cx='${j * 70 + 50}px' cy='${i * 70 + 50}px'> </circle>`;
}
}
svg.innerHTML = doc;
}
window.clickSquare = (x, y) => {
console.log("You clicked square ", x, y);
}
You don't need the / before it. Call render in your script and move it to the bottom of the dom.
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="board">
<svg id="svg"></svg>
</div>
<script src="index.js"></script>
</body>
</html>
JS Below
const grid = [
[{},{},{},{},{},{},{}],
[{},{},{},{},{},{},{}],
[{},{},{},{},{},{},{}],
[{},{},{},{},{},{},{}],
[{},{},{},{color: "red"},{color:"black"},{},{}],
];
const render = () =>{
console.info("rendering?")
const svg = document.getElementById("svg");
let doc = ``;
for (var i=0; i<grid.length; i++) {
var row = grid[i];
for (var j=0; j<row.length; j++){
const square = grid[i][j];
const color = square && square.color || 'gray';
doc = doc + `<circle onclick="clickSquare(${i}, ${j})" fill = '${color}' r='30px' cx='${j * 70 + 50}px' cy='${i * 70 + 50}px'> </circle>`;
}
}
svg.innerHTML = doc;
}
render()
window.clickSquare = (x, y) => {
console.log("You clicked square ", x, y);
}
First remove the / (slash) before the filename,
and also when you link a java-script file add the type as application/javascript when it put it recognize the file type is java-script.
<html>
<head>
<link rel="stylesheet" src="index.css">
<script type="application/javascript" src="index.js"></script>
</head>
</html>
i have a problem where for some reason my .js file is not loaded to browser, when other files are. The problem is that the file that should be loaded is important for my "site" to work. Heres code:
var viewModel = new PeopleTableViewModel({
// uncaught reference error Peopetable view model is not defined
pageSize: 25,
current: data.length,
context: document.getElementById('table')
});
var comparator = new Comparators();
function init() {
viewModel.next();
}
Heres my HTML :
<div id="table"></div>
<button onclick="viewModel.prev()">PREV</button>
<button onclick="viewModel.next()">NEXT</button>
<script type="application/javascript" src="scripts/DATA.js"></script>
<script type="application/javascript" src="scripts/Comparators.js"></script>
<script type="application/javascript" scr="scripts/PeopleTableViewModel.js"></script>
<script type="application/javascript" src="scripts/ListOfPeople.js"></script>
<script type="application/javascript" src="scripts/scripts.js"></script>
<script type="application/javascript" src="scripts/Person.js"></script>
</body>
And PeopleTableViewModel.js:
function PeopleTableViewModel(config) {
var self = this;
self.people = new ListOfPeople();
self.currentPage = 0;
self.pageSize = config.pageSize;
self.context = config.context;
self.next = function() {
//alert('kliknąłeś następny');
self.people.clear();
var begin = (self.currentPage) * self.pageSize;
var end = (self.currentPage + 1) * self.pageSize;
getData(begin, end);
self.currentPage++;
self.context.innerHTML = self.people.toTable();
}
self.prev = function() {
//alert('kliknąłeś poprzedi');
self.people.clear();
if (self.currentPage - 1 >= 0) {
self.currentPage--;
}
var begin = (self.currentPage) * self.pageSize;
var end = (self.currentPage + 1) * self.pageSize;
getData(begin, end);
self.context.innerHTML = self.people.toTable();
}
self.sort = function(comparer) {
data.sort(comparer);
self.currentPage = 0;
self.next();
}
var getData = function(begin, end) {
if (end > data.length) {
end = data.length;
}
if (begin < 0) {
begin = 0;
}
for (var i = begin; i < end; i += 1) {
self.people.addPerson(data[i]);
}
}
}
Thank you for taking time on my issue !
You made a mistake in the html markup.
<script type="application/javascript" scr="scripts/PeopleTableViewModel.js"></script>
instead of
<script type="application/javascript" src="scripts/PeopleTableViewModel.js"></script>
i`m working on school project
how can i access the name of variable and store it to in another variable ex: y[i].
what to write in place of comment below in javascript code.
var p = ["a","b","d"];
var q = ["d","b","c"];
var value = "d";
var x = [];
var y = [];
function testArrays(needle, arrays) {
for (var i=0; i<arrays.length; i++) {
x[i] = arrays[i].indexOf(value);
// y[i] = // store array`s name here
}
document.getElementById("demo").innerHTML = x + y;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<p>Click the button to display the position of the element "Apple":</p>
<button onclick="testArrays(value, [p, q])">Try it</button>
<p id="demo"></p>
</body>
</html>
Here is what you search for : You have to construct a object with your arrays and pass trow all the arrays.
var obj = {
p:["a","b","d"],
q: ["d","b","c"]
};
var value = "d";
var x = [];
var y = [];
function testArrays(needle, arrays) {
for(key in arrays){
x.push(arrays[key].indexOf(value));
y.push(key);
}
document.getElementById("demo").innerHTML = x + y;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<p>Click the button to display the position of the element "Apple":</p>
<button onclick="testArrays(value, obj)">Try it</button>
<p id="demo"></p>
</body>
</html>
Since you ask for what i was talking about. I'll give you the code.
Again, to re-iterate my point, you cannot get the variable name. But if you must have the variable somehow, you can work around by putting all the variables you need access to in an object.
you will not get the variable name of the object, but you can access all the properties names of this object.
Here is the codepen link to see the code running.
html
<p id="test"><p>
js
var variableList = {};
variableList.var1 = 1;
variableList.var2 = -50;
variableList.var3 = [2,4];
variableList.var4 = "4";
variableList.var5 = 5.5;
var ele = document.getElementById("test");
for(var propertyName in variableList) {
ele.innerHTML = ele.innerHTML + "<br>" + propertyName + " : " + variableList[propertyName];
}