Replace and Return same result - javascript

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

How to make a leaderboard ranking scores JavaScript

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.

Wanting to refactor these nested javascript loops of arrays and the conditional if statements

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;
}
}
}

Display corresponding parallel array value to html

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.

Javascript printing html tags as part of innerHTML output to screen

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>';

Only show objects in array that contain a specific string

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>

Categories