I have this code. I need to follow this instruction but I don't understand how to do it. "Replace the code that assigns the cards and score data to the outputArea with a return statement
that returns the same data from the ShowHand function."
function showHand(hand, score)
{
let cards="";
for(let i=0; i<hand.length; i++)
cards += hand[i].card + '';
outputArea.innerText += cards + "" + score + "\n" ;
};
Thank you
Just remove outputArea.innerText
function showHand(hand, score){
let cards="";
let result = [];
for(let i=0; i<hand.length; i++)
cards += hand[i].card + '';
result.push( cards + "" + score + "\n" ) ;
};
return result;
}
Related
Currently, my code shows the score of the user that's logged in. I want to show the highest score obtained by each user on the leaderboard until the top 10.
js from index.html
<script>
loadRankingTable();
window.onload = () => {
//Check login
if (sessionStorage.loggedInUser !== undefined) {
let oldData = localStorage.getItem(sessionStorage.loggedInUser);
console.log(JSON.parse(oldData))
if (oldData) {
oldData = JSON.parse(oldData);
oldData.topScore = highscore;
localStorage.setItem(sessionStorage.loggedInUser, JSON.stringify(oldData));
}
document.getElementById("Greeting").innerHTML = sessionStorage.loggedInUser;
}
}
</script>
prac.js
function loadRankingTable(){
let str = "<table><tr><th>Rank</th><th>Name</th><th>Score</th></tr>";
for(let key of Object.keys(localStorage)){
let usr = JSON.parse(localStorage[key]);
str += "<tr><td>" + "1" + "</td><td>" + sessionStorage.loggedInUser + "</td><td>" + highscore + "</td></tr>";
}
str += "</table>";
document.getElementById("Ranking").innerHTML = str;
}
The highscore gets stored in the local storage, but I want the logged in user's highscore shown next to their name on the leaderboard, up till the top 10.
Try this: (others have permission to copy and edit this)
function load(){
var userscores = {
"ex1": 10,
"noncy": 40,
"del3tus": 24,
"the_r0ck": 8,
"MONSTER_OSITY": 120
};
var max = 0;
var sorted = [];
for(var prop in userscores){
if(userscores[prop] >= max){
max = userscores[prop];
}
}
var cur = max;
for(var i = max; i > 0; i--){
for(var prop in userscores){
if(userscores[prop] == i){
sorted.push(prop);
}
}
}
var html = "";
for(var i = 0; i < sorted.length; i++){
html = "<tr><td>" + (i + 1) + "</td><td>" + sorted[i] + "</td><td>" + userscores[sorted[i]] + "</td></tr>";
document.getElementById("leaderboard").innerHTML += html;
}
}
<button onclick="load();">Load leaderboard</button>
<table id="leaderboard" border="1" cellSpacing="0px"><tr><th>#</th><th>Name</th><th>Points</th></tr></table>
If that doesn't work, let me know. You can also change it to make it fit better.
I have an outer and inner loop that I need to be able to display input text boxes on the outer loop, meanwhile I need to look at the inner loop to exclude value that are in that array. I have tried many different ways and adjustments - this seems to be working - but it looks frickin ugly doesn't it? What can be done to improve readability?
var attName = 'IVS-REC-TYP','a', 'b', 'c', 'd';
var listTEDNoEdit = ['IVS-REC-TYP', 'IVS-TM-STAMP', 'IVS-ADJ-KEY', 'IVS-TCN-FILING-DT', 'IVS-TCN-FILING-ST-CTRY', 'IVS-TCN-SEQ', 'IVS-DT-PROCESSED', 'IVS-ADMIN-CLIN', 'IVS-NBR-LINES', 'IVS-LINE-NBR', 'IVS-DT-PROCESSED', 'IVS-DEERS-DDS', 'IVS-LINE-AMT-ALLOWED'];
// OUTER Loop is attName
// INNER Loop is looking to exclude these values in this array called listTEDNoEdit
for (i = 0; i < tagAttr.length; i++) {
var attName = tagAttr[i].localName;
for (index2 = 0; index2 < listTEDNoEdit.length; index2++) {
if (attName === listTEDNoEdit[index2]) {
tagAttrText += "<li>" + attName + " = " + attText + "</li>";
break;
} else {
var tedEx = listTEDNoEdit.indexOf(attName);
if (tedEx === -1) {
tagAttrText += "<li>" + attName + " = <input type='text' value='" + attText + "'/></li>";
break;
} else {
tagAttrText += "<li>" + attName + " = " + attText + "</li>";
break;
}
break;
}
}
}
I currently have two arrays, nameArray and markArray which are added to when users input their name and mark. I want to display all names and marks at the click of a button but have what mark belongs to who obvious. My attempts are below creating displayInfo but whenever I try to output it to HTML it only shows the last one in each array.
if (Array.isArray(nameArray) && nameArray.length) {
console.log("display all working");
// var displayName = nameArray.toString();
// var displayMark = markArray.toString();
for(let i=0; i < nameArray.length; i++){
var displayInfo = "";
//var displayInfo = nameArray[i] + "<br/>" + markArray[i];
//console.log(displayInfo)
//document.getElementById("result").innerHTML = displayInfo;
displayInfo += nameArray[i] + "<br/>" + markArray[i] + "";
}
document.getElementById("result").innerHTML = displayInfo
}else{
document.getElementById("result").innerHTML = "No result's have been entered! Please enter results before display them!"
}
} ```
var name = document.getElementById("name").value;
var mark = document.getElementById("mark").value;
if(name == "" || mark == ""){
document.getElementById("result").innerHTML = "An input field is empty please try again."
}else{
nameArray.push(name);
markArray.push(mark);
console.log(nameArray);
document.getElementById("result").innerHTML = name + "'s " + "results have been added to the system!"
}
}```
The output should look something like John-4 Jack-6, just any way in which it is clear whos result it is.
if (Array.isArray(nameArray) && nameArray.length) {
console.log("display all working");
var displayInfo = [];
// var displayName = nameArray.toString();
// var displayMark = markArray.toString();
for(let i=0; i < nameArray.length; i++){
//var displayInfo = nameArray[i] + "<br/>" + markArray[i];
//console.log(displayInfo)
//document.getElementById("result").innerHTML = displayInfo;
displayInfo.push(nameArray[i] + "<br/>" + markArray[i] + "");
}
displayInfo.forEach(single => {
document.getElementById("result").innerHTML = single;
})
}else{
document.getElementById("result").innerHTML = "No result's have been entered! Please enter results before display them!"
}
You are overwriting your variable inside your loop until the loop ends, which is why you get the last element of the array. Try my code.
I have a javascript segment that prints output to a div.
output.textContent = "";
for(i=0; i<14; i++){
output.append(document.createElement("p").innerHTML = net_words(sonnet[i]));
output.append(document.createElement("br"));
}
The function net_words that generates the output is as follows:
function net_words(line) {
var net_line = Math.floor(Math.random()*4)
var ret = ""
if (net_line != 1) {
ret += "<span class=\"netno\">"
ret += line
}
else {
var net_list = line.split(" ")
var rand_word = Math.floor(Math.random() * net_list.length)
ret += "<span class=\"netno\">"
for (var i=0; i<net_list.length; i++) {
if (i == rand_word) {
ret += "<span class=\"netyes\">"
ret += net_list[i]
ret += " "
ret += "</span>"
}
else {
ret += net_list[i]
ret += " "
}
}
}
ret += "</span>"
return ret
}
The problem is, it prints the line as follows:
<span class="netno">From fairest creatures we desire increase</span>
That is, it prints it with the HTML tag visible, rather than applied to the code. When I paste it into the text editor for stack overflow, it prints as normal (no tags) unless I put it as a code snippet. What is the cause of this error?
The problem is here:
output.append(document.createElement("p").innerHTML = net_words(sonnet[i]));
You think that you appended <p>, but in fact you appended the result of the assignment. To fix it do:
var p = document.createElement("p");
p.innerHTML = net_words(sonnet[i]);
output.append(p);
or
output.innerHTML += '<p>' + net_words(sonnet[i]) + '</p>';
I was trying to make something where you can type a string, and the js only shows the objects containing this string. For example, I type Address1 and it searches the address value of each one then shows it (here: it would be Name1). Here is my code https://jsfiddle.net/76e40vqg/11/
HTML
<input>
<div id="output"></div>
JS
var data = [{"image":"http://www.w3schools.com/css/img_fjords.jpg","name":"Name1","address":"Address1","rate":"4.4"},
{"image":"http://shushi168.com/data/out/114/38247214-image.png","name":"Name2","address":"Address2","rate":"3.3"},
{"image":"http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg","name":"Name3","address":"Address3","rate":"3.3"}
];
var restoName = [], restoAddress = [], restoRate = [], restoImage= [];
for(i = 0; i < data.length; i++){
restoName.push(data[i].name);
restoAddress.push(data[i].address);
restoRate.push(data[i].rate);
restoImage.push(data[i].image);
}
for(i = 0; i < restoName.length; i++){
document.getElementById('output').innerHTML += "Image : <a href='" + restoImage[i] + "'><div class='thumb' style='background-image:" + 'url("' + restoImage[i] + '");' + "'></div></a><br>" + "Name : " + restoName[i] + "<br>" + "Address : " + restoAddress[i] + "<br>" + "Rate : " + restoRate[i] + "<br>" + i + "<br><hr>";
}
I really tried many things but nothing is working, this is why I am asking here...
Don't store the details as separate arrays. Instead, use a structure similar to the data object returned.
for(i = 0; i < data.length; i++){
if (data[i].address.indexOf(searchedAddress) !== -1) { // Get searchedAddress from user
document.getElementById("output").innerHTML += data[i].name;
}
}
Edits on your JSFiddle: https://jsfiddle.net/76e40vqg/17/
Cheers!
Here is a working solution :
var data = [{"image":"http://www.w3schools.com/css/img_fjords.jpg","name":"Name1","address":"Address1","rate":"4.4"},
{"image":"http://shushi168.com/data/out/114/38247214-image.png","name":"Name2","address":"Address2","rate":"3.3"},
{"image":"http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg","name":"Name3","address":"Address3","rate":"3.3"}
];
document.getElementById('search').onkeyup = search;
var output = document.getElementById('output');
function search(event) {
var value = event.target.value;
output.innerHTML = '';
data.forEach(function(item) {
var found = false;
Object.keys(item).forEach(function(val) {
if(item[val].indexOf(value) > -1) found = true;
});
if(found) {
// ouput your data
var div = document.createElement('div');
div.innerHTML = item.name
output.appendChild(div);
}
});
return true;
}
<input type="search" id="search" />
<div id="output"></div>