Develop Reference

Cannot get program to run. (Javascript, HTML, CSS)

I am trying to write a simple text based rpg for my little nephew. I followed along with a youtube tutorial and for some reason I cannot understand, the program won't run. I've gone over the code in all three files several times for typo's and anything obscure that shouldn't be there. However, I am stumped. Any help would be appreciated.
const textElement = document.getElementById("text")
const optionButtonsElement = document.getElementById("option-buttons")
let state = {}
function startGame(){
state = {}
showTextNode(1)
}
function showTextNode(textNodeIndex){
const textNode = textNodes.find(textNode => textNode.id === textNodeIndex)
textElement.innerText = textNode.text
while (optionButtonsElement.firstChild){
optionButtonsElement.removeChild(optionButtonsElement.firstChild)
}
textNode.options.forEach(option => {
if(showOption(option)){
const button = document.createElement("button")
button.innerText = option.text
button.classList.add("btn")
button.addEventListener("click", () => selectOption(option))
optionButtonsElement.appendChild(button)
}
})
}
function showOption(option) {
return option.requiredState == null || option.requiredState(state)
}
function selectOption(option) {
const nextTextNodeId = option.nextText
state = object.assign(state, option.setState)
if (nextTextNodeId <= 0){
return startGame()
}
state = Object.assign(state, option.State)
showTextNode(nextTextNodeId)
}
const textNodes = [
{
id: 1,
text: "You wake up in a strange place and you see a jar of blue goo near you.",
options: [
{
text: "Take goo",
setState: {bluegoo: true},
nextText: 2
},
{
text: "Leave the goo",
nextText: 2
}
]
},
{
id: 2,
text: "You venture forth in search of answers to where you are when you come across a merchant.",
options:[
{
text: "Trade the goo for a sword.",
requiredState: (currentState) => currentState.bluegoo,
setState: {bluegoo: false, sword: true },
nextText: 3
},
{
text: "Trade the goo for a shield.",
requiredState: (currentState) => currentState.bluegoo,
setState: {bluegoo: false, shield: true },
nextText: 3
},
{
text: "Ignore the merchant.",
nextText: 3
},
]
},
{
id: 3,
text: "After leaving the merchant you start to feel tired ans tumble upon a small town next to a dangerous looking castle.",
options: [
{
text: "Explore the castle.",
nextText: 4
},
{
text: "Find a room to sleep at in the towwn.",
nextText: 5
},
{
text: "Find some hay in a stable to sleep in.",
nextText: 6
}
]
},
{
id: 4,
text: "You are so tired that you fall asleep while exploring the castle and are killed by some terrible monster in your sleep.",
options [
{
text: "Restart",
nextText: -1
}
]
},
{
id: 5,
text: 'Without any money to buy a room you break into the nearest inn and fall asleep. After a few hours of sleep the owner of the inn finds you and has the town guard lock you in a cell.',
options: [
{
text: 'Restart',
nextText: -1
}
]
},
{
id: 6,
text: 'You wake up well rested and full of energy ready to explore the nearby castle.',
options: [
{
text: 'Explore the castle',
nextText: 7
}
]
},
{
id: 7,
text: 'While exploring the castle you come across a horrible monster in your path.',
options: [
{
text: 'Try to run',
nextText: 8
},
{
text: 'Attack it with your sword',
requiredState: (currentState) => currentState.sword,
nextText: 9
},
{
text: 'Hide behind your shield',
requiredState: (currentState) => currentState.shield,
nextText: 10
},
{
text: 'Throw the blue goo at it',
requiredState: (currentState) => currentState.blueGoo,
nextText: 11
}
]
},
{
id: 8,
text: 'Your attempts to run are in vain and the monster easily catches.',
options: [
{
text: 'Restart',
nextText: -1
}
]
},
{
id: 9,
text: 'You foolishly thought this monster could be slain with a single sword.',
options: [
{
text: 'Restart',
nextText: -1
}
]
},
{
id: 10,
text: 'The monster laughed as you hid behind your shield and ate you.',
options: [
{
text: 'Restart',
nextText: -1
}
]
},
{
id: 11,
text: 'You threw your jar of goo at the monster and it exploded. After the dust settled you saw the monster was destroyed. Seeing your victory you decide to claim this castle as your and live out the rest of your days there.',
options: [
{
text: 'Congratulations. Play Again.',
nextText: -1
}
]
}
]
startGame()
*, *::before, *::after{
box-sizing: border-box;
font-family: Gotham Rounded;
}
body{
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: #333;
}
.container{
width: 800px;
max-width: 80%;
background-color: white;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 10px 2px;
}
.btn-grid{
display: grid;
grid-template-columns: repeat(2, auto);
gap: 10px;
margin-top: 20px;
}
.btn{
background-color: hsl(200, 100%, 50%);
border: 1px solid hsl(200, 100%, 30%);
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
}
.btn:hover{
border-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sawyer's Dungeons and Dragons Game</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="game.js"></script>
</head>
<body>
<div class="container">
<div id="text">Text</div>
<div id="option-buttons" class="btn-grid">
<button class="btn">Option 1</button>
<button class="btn">Option 2</button>
<button class="btn">Option 3</button>
<button class="btn">Option 4</button>
</div>
</div>
</body>
</html>
I appreciate anyone taking a look at this.
Cheers!

There are few mistakes in your code
1st:
You are missing : here
{
id: 4,
text: "You are so tired that you fall asleep while exploring the castle and are killed by some terrible monster in your sleep.",
// : is missing after options
options [
{
text: "Restart",
nextText: -1
}
]
},
2nd:
It should be Object.assign and NOT
state = object.assign(state, option.setState)
function selectOption(option) {
const nextTextNodeId = option.nextText
// It should be Object.assign
state = object.assign(state, option.setState)
if (nextTextNodeId <= 0){
return startGame()
}
state = Object.assign(state, option.State)
showTextNode(nextTextNodeId)
}
You should add defer attribute while linking js file in html file in this case
<script defer src="game.js"></script>
This should fix the problem
HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sawyer's Dungeons and Dragons Game</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
// need to add defer attribute
<script defer src="game.js"></script>
</head>
<body>
<div class="container">
<div id="text">Text</div>
<div id="option-buttons" class="btn-grid">
<button class="btn">Option 1</button>
<button class="btn">Option 2</button>
<button class="btn">Option 3</button>
<button class="btn">Option 4</button>
</div>
</div>
</body>
</html>
JS File
const textElement = document.getElementById("text")
const optionButtonsElement = document.getElementById("option-buttons")
let state = {}
function startGame(){
state = {}
showTextNode(1)
}
function showTextNode(textNodeIndex){
const textNode = textNodes.find(textNode => textNode.id === textNodeIndex)
textElement.innerText = textNode.text
while (optionButtonsElement.firstChild){
optionButtonsElement.removeChild(optionButtonsElement.firstChild)
}
textNode.options.forEach(option => {
if(showOption(option)){
const button = document.createElement("button")
button.innerText = option.text
button.classList.add("btn")
button.addEventListener("click", () => selectOption(option))
optionButtonsElement.appendChild(button)
}
})
}
function showOption(option) {
return option.requiredState == null || option.requiredState(state)
}
function selectOption(option) {
const nextTextNodeId = option.nextText
state = Object.assign(state, option.setState)
if (nextTextNodeId <= 0){
return startGame()
}
state = Object.assign(state, option.State)
showTextNode(nextTextNodeId)
}
const textNodes = [
{
id: 1,
text: "You wake up in a strange place and you see a jar of blue goo near you.",
options: [
{
text: "Take goo",
setState: {bluegoo: true},
nextText: 2
},
{
text: "Leave the goo",
nextText: 2
}
]
},
{
id: 2,
text: "You venture forth in search of answers to where you are when you come across a merchant.",
options:[
{
text: "Trade the goo for a sword.",
requiredState: (currentState) => currentState.bluegoo,
setState: {bluegoo: false, sword: true },
nextText: 3
},
{
text: "Trade the goo for a shield.",
requiredState: (currentState) => currentState.bluegoo,
setState: {bluegoo: false, shield: true },
nextText: 3
},
{
text: "Ignore the merchant.",
nextText: 3
},
]
},
{
id: 3,
text: "After leaving the merchant you start to feel tired ans tumble upon a small town next to a dangerous looking castle.",
options: [
{
text: "Explore the castle.",
nextText: 4
},
{
text: "Find a room to sleep at in the towwn.",
nextText: 5
},
{
text: "Find some hay in a stable to sleep in.",
nextText: 6
}
]
},
{
id: 4,
text: "You are so tired that you fall asleep while exploring the castle and are killed by some terrible monster in your sleep.",
options: [
{
text: "Restart",
nextText: -1
}
]
},
{
id: 5,
text: 'Without any money to buy a room you break into the nearest inn and fall asleep. After a few hours of sleep the owner of the inn finds you and has the town guard lock you in a cell.',
options: [
{
text: 'Restart',
nextText: -1
}
]
},
{
id: 6,
text: 'You wake up well rested and full of energy ready to explore the nearby castle.',
options: [
{
text: 'Explore the castle',
nextText: 7
}
]
},
{
id: 7,
text: 'While exploring the castle you come across a horrible monster in your path.',
options: [
{
text: 'Try to run',
nextText: 8
},
{
text: 'Attack it with your sword',
requiredState: (currentState) => currentState.sword,
nextText: 9
},
{
text: 'Hide behind your shield',
requiredState: (currentState) => currentState.shield,
nextText: 10
},
{
text: 'Throw the blue goo at it',
requiredState: (currentState) => currentState.blueGoo,
nextText: 11
}
]
},
{
id: 8,
text: 'Your attempts to run are in vain and the monster easily catches.',
options: [
{
text: 'Restart',
nextText: -1
}
]
},
{
id: 9,
text: 'You foolishly thought this monster could be slain with a single sword.',
options: [
{
text: 'Restart',
nextText: -1
}
]
},
{
id: 10,
text: 'The monster laughed as you hid behind your shield and ate you.',
options: [
{
text: 'Restart',
nextText: -1
}
]
},
{
id: 11,
text: 'You threw your jar of goo at the monster and it exploded. After the dust settled you saw the monster was destroyed. Seeing your victory you decide to claim this castle as your and live out the rest of your days there.',
options: [
{
text: 'Congratulations. Play Again.',
nextText: -1
}
]
}
]
startGame()

Have you opened your browser's console to check for errors?
text: "You are so tired that you fall asleep while exploring the castle and are killed by some terrible monster in your sleep.",
options [
You are missing a ":" here:
options: [
As for this:
state = object.assign(state, option.setState)
What is object?

Using an alert in an actionsheet in React native

I'm using a actionsheet in react native and need it to generate an alert once a button is clicked. The buttons are in the array provided under the BUTTONS variable. The code is shown below:
const BUTTONS = [
{ text: "SMS", icon: "chatboxes", iconColor: "#2c8ef4" },
{ text: "Email", icon: "analytics", iconColor: "#f42ced" },
{ text: "Push Notification", icon: "aperture", iconColor: "#ea943b" },
{ text: "Delete", icon: "trash", iconColor: "#fa213b" },
{ text: "Cancel", icon: "close", iconColor: "#25de5b" }
];
const DESTRUCTIVE_INDEX = 3;
const CANCEL_INDEX = 4;
return(
...
ActionSheet.show(
{
options: BUTTONS,
cancelButtonIndex: CANCEL_INDEX,
destructiveButtonIndex: DESTRUCTIVE_INDEX,
title: "How do you want to receive your notification"
},
buttonIndex => {
setSheet({ clicked: BUTTONS[buttonIndex] });
}
)

Don't understand why my last item is undefined

I'm trying to order different job with their status, name, description and color.
I don't understand why my last item (color and ame is undefined while the other item are good...
(example in the last part) .
I'm using a array and display thanks to the function.
Thanks for your help.
var type = new Array("blue", "yellow", "red", "notbuilt");
var numberThingparkx = new Array(0, 0, 0, 0);
var reds = new Array();
function Thingparkx(response){
var Json = JSON.parse(response);
if(Json.jobs){
var Data = Json.jobs.map(function(i) {
var url = i.url.split('//');
ajaxGet("https://"+AuthString+url[1]+"api/json", Thingparkx);
});
}else{
for(var i = 0; i < type.length; i++){
if(type[i] == Json.color){
numberThingparkx[i]++;
if(Json.color === "red"){
nom = new Array(Json.fullDisplayName,Json.description,"error",Json.color);
reds.push(nom);
}
if(Json.color === "yellow"){
nom = new Array(Json.fullDisplayName,Json.description,"instable",Json.color);
reds.push(nom);
}
}
}
}
}
var Data = reds.map(function(i) {
return {
"title": {
"text": i[0]
},
"label": {
"name": i[2],
"color": i[3],
},
"description": i[1]
};
});
console.log(Data);
push({
key: '186163-f7e58b30-8a01-0137-f3a4-0af8bc3cd516',//Widget Key
data: Data
})
.then(response => console.log(response));
}
Actual result :
[ { title: { text: 'Thingpark-X » tpx-integration-tests build' },
label: { name: 'error', color: 'red' },
description: 'Job for tpx-integration-tests build' },
{ title: { text: 'Thingpark-X » Bundles » util build' },
label: { name: 'error', color: 'red' },
description: 'Job for util build' },
{ title:
{ text: 'Thingpark-X » Bundles » storage.driver.mongodb build' },
label: { name: 'instable', color: 'yellow' },
description: 'Job for storage.driver.mongodb build' },
{ title:
{ text: 'Thingpark-X » Platforms » CI » tpx create accounts' },
label: { name: undefined, color: undefined },
description: 'Job for tpx create accounts' } ]
Expected result:
[ { title: { text: 'Thingpark-X » tpx-integration-tests build' },
label: { name: 'error', color: 'red' },
description: 'Job for tpx-integration-tests build' },
{ title: { text: 'Thingpark-X » Bundles » util build' },
label: { name: 'error', color: 'red' },
description: 'Job for util build' },
{ title:
{ text: 'Thingpark-X » Bundles » storage.driver.mongodb build' },
label: { name: 'instable', color: 'yellow' },
description: 'Job for storage' },
{ title:
{ text: 'Thingpark-X » Platforms » CI » tpx create accounts' },
label: { name: 'error', color: 'red' },
description: 'Job for tpx create accounts' } ]

div tag not getting appended to another div tag using append method

Could anyone please tell me why the div with button id is not getting appended to the div with clickable class in the code below.
var $el = $("<div/>", {class: "clickable",style: "margin:100px 10px 20px 20px ",}).append($("<div />", { id: "button"})).on('click', handleClick);
I didn't see anything in the console log when I did the following :
console.log("Element el test");
console.log($el);
I want to append the div with id = button to the div with clickable class so that I could display a button below each table/grid using this $("#button").jqxButton({ value: 'Export Grid '});
But for some reason, it's not showing up in the console log statements as mentioned above.
Secondly, I would be attaching an event to the button once it starts showing up below the grid/table. Basically, I will be doing something like this :
$("#button" ).on('click', function () {
$(".clickable").jqxGrid('exportdata', 'pdf', 'jqxGrid');
});
So, I am not sure if the following approach of appending is good or not because there's already a onclick event attached. So, I am imagining that even if the following approach starts working, clicking the div with
button id will do the same thing that is achieved when the div containing clickable class is clicked?
var $el = $("<div/>", {class: "clickable",style: "margin:100px 10px 20px 20px ",}).append($("<div />", { id: "button"})).on('click', handleClick);
var source = {
localdata: [
["https://www.samplelink.com", "Maria Anders", "Sales Representative", "Obere Str. 57", "Berlin", "Germany"],
["https://www.samplelink.com", "Ana Trujillo", "Owner", "Avda. de la Constitucin 2222", "Mxico D.F.", "Mexico"],
["https://www.samplelink.com", "Antonio Moreno", "Owner", "Mataderos 2312", "Mxico D.F.", "Mexico"],
["https://www.samplelink.com", "Thomas Hardy", "Sales Representative", "120 Hanover Sq.", "London", "UK"],
["https://www.samplelink.com", "Christina Berglund", "Order Administrator", "Berguvsvgen 8", "Lule", "Sweden"],
["https://www.samplelink.com", "Hanna Moos", "Sales Representative", "Forsterstr. 57", "Mannheim", "Germany"],
["https://www.samplelink.com", "Roland Mendel", "Sales Manager", "Kirchgasse 6", "Graz", "Austria"]
],
datafields: [{
name: 'link',
type: 'string',
map: '0'
},
{
name: 'ContactName',
type: 'string',
map: '1'
},
{
name: 'Title',
type: 'string',
map: '2'
},
{
name: 'Address',
type: 'string',
map: '3'
},
{
name: 'City',
type: 'string',
map: '4'
},
{
name: 'Country',
type: 'string',
map: '5'
}
],
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(".clickable").jqxGrid({
width: 800,
height: 270,
source: dataAdapter,
columnsresize: true,
sortable: true,
columns: [{
text: 'Link',
datafield: 'link',
width: 200
},
{
text: 'Contact Name',
datafield: 'ContactName',
width: 150
},
{
text: 'Contact Title',
datafield: 'Title',
width: 100
},
{
text: 'Address',
datafield: 'Address',
width: 100
},
{
text: 'City',
datafield: 'City',
width: 100
},
{
text: 'Country',
datafield: 'Country'
}
]
});
$(".clickable").on("rowselect", handleClick);
function handleClick(e) {
var $el = $("<div/>", {
class: "clickable",
style: "margin:100px 10px 20px 20px ",
}).append($("<div />", {
id: "button"
})).on('click', handleClick);
console.log("Element el test");
console.log($el);
/*var buttonDiv = $("<div />", {
id: "button"
});
console.log("Testing button Div");
console.log(buttonDiv);
$("#button").jqxButton({
value: 'Export Grid '
});*/
$el.jqxGrid({
height: 270,
source: dataAdapter,
columns: [{
text: 'Link',
datafield: 'link',
width: 200
},
{
text: 'Contact Name',
datafield: 'ContactName',
width: 150
},
{
text: 'Contact Title',
datafield: 'Title',
width: 100
},
{
text: 'Address',
datafield: 'Address',
width: 100
},
{
text: 'City',
datafield: 'City',
width: 100
},
{
text: 'Country',
datafield: 'Country'
}
]
});
var $this = $(this),
$parent = $(this).parent();
if (e.type == 'rowselect') {
$('.clickable').slice(1).remove();
}
$parent.append($el);
}
.test {
margin: 100px 10px 20px 20px;
}
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet" />
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div class="wrapper">
<div class="clickable" style="margin:100px 10px 20px 20px;"></div>
</div>

your $el is getting assigned to the return value of your last .on call.
You probably want to do something more like this
var $el = $("<div/>", {class: "clickable",style: "margin:100px 10px 20px 20px ",});
var $nested = $("<div />", { id: "button"});
$el.append($nested);
$nested.on('click', handleClick);

Highcharts : Combo-meteogram (DATA,XML/JSON)

I want to modify this jsfiddle code.
I don't want to get data from json/xml, but I want to put it manually like this:
this is a part of my code I didn't continued cause I lost it and it's complicated
{
name: 'Air pressure',
color: Highcharts.getOptions().colors[2],
data: [1020.5, 0, 0, 0, 0, 1009.5, 1015.5, 1010.5, 1001.5, 1001.5],
marker: {
enabled: false
},
shadow: false,
tooltip: {
valueSuffix: ' hPa'
},
dashStyle: 'shortdot',
yAxis: 2
}
For all things I want to get just 5 values for all data.
Datetime, Precipitation, Temperature, Air pressure ....
This is an example of data entered manually, not from a server or somethings.
At the end, I want to do this to know where I can put my data because I have it but I don't know where I can put it.

At the end of JavaScript code you can find function(xml).
Inside it you can write console.log(xml) and then check in console (Developer Tools) what is the structure of the data.
If you do want to change the code of the demo, then you would have to write your data in the same format.
You can look in code to see what exactly is needed, because not all data is used. Based on that you can disable ajax call and create data object manually.
Example: http://jsfiddle.net/qLynjzds/
Example of how data can look to work in the demo (2 points):
var xml = {
credit: {
link: {
'#attributes': {
url: "http://www.yr.no/place/United_Kingdom/England/London/" //link for credits
}
}
},
location: {
country: "Country",
name: "City"
},
forecast: {
tabular: {
time: [{
'#attributes': {
from: "2015-05-28T14:00:00",
to: "2015-05-28T15:00:00"
},
symbol: {
'#attributes': {
'var': "01d",
name: "Clear sky"
},
},
temperature: {
'#attributes': {
value: "17"
},
},
precipitation: {
'#attributes': {
value: "0"
},
},
windDirection: {
'#attributes': {
deg: "252.6",
name: "West"
},
},
windSpeed: {
'#attributes': {
mps: "16.6",
name: "Strong breeze"
},
},
pressure: {
'#attributes': {
value: "1013.8"
},
}
}, {
'#attributes': {
from: "2015-05-28T15:00:00",
to: "2015-05-28T16:00:00"
},
symbol: {
'#attributes': {
'var': "01d",
name: "Clear sky"
},
},
temperature: {
'#attributes': {
value: "15"
},
},
precipitation: {
'#attributes': {
value: "1"
},
},
windDirection: {
'#attributes': {
deg: "252.6",
name: "West"
},
},
windSpeed: {
'#attributes': {
mps: "16.6",
name: "Strong breeze"
},
},
pressure: {
'#attributes': {
value: "1010.8"
},
}
}]
}
}
};