This is a dapp that I am building. So it takes in the mood and then sets it on the goerli testnet. But I am getting this error => skeleton.html:115 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getMood')
at getMood. Also, it sometimes works and sometimes I get this error. But recently no matter how many times I run the dapp, I am getting this same error.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Made with love in India for WEB3</title>
</head>
<body>
<div>
<B><I><h1 class="heading"> Welcome To The Website</h1></I></B>
<label for="mood">Input Mood:</label> <br />
<input type="text" id="mood" >
<button onclick = "getMood()" >Get Mood</button>
<button onclick = "setMood()" >Set Mood</button>
</div>
</body>
<script
src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"
type="application/javascript"></script>
<script>
const MoodContractAddress = "THE_ADDRESS";
const MoodContractABI = [
{
"inputs": [
{
"internalType": "string",
"name": "_mood",
"type": "string"
}
],
"name": "setMood",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [],
"name": "getMood",
"outputs": [
{
"internalType": "string",
"name": "",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
}
]
let MoodContract;
let signer;
const provider = new ethers.providers.Web3Provider(window.ethereum, "goerli");
provider.send("eth_requestAccounts", []).then(() => {
provider.listAccounts().then(function(accounts) {
signer = provider.getSigner(accounts[0]);
MoodContract = new ethers.Contract(MoodContractAddress, MoodContractABI, signer);
});
});
async function getMood(){
var getMoodPromise = MoodContract.getMood();
var mood= await getMoodPromise;
console.log(mood);
}
async function setMood(){
var mood= document.getElementById("mood").value;
var setMoodPromise = MoodContract.setMood(mood);
await setMoodPromise;
}
</script>
</html>
Any guidance will be helpful and appreciated. Thanks!
Related
I have a ChartJS 2.8 code below. I want to change the font-family (style) of the x-Axis by applying a custom font and also changing x-Axis labels to red color. I tried as below and it is not working. Any help please?
Note: Please keep the library 2.8.0, do not change it.
Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.ico">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill.min.js"></script>
<link href="https://fonts.cdnfonts.com/css/benchnine" rel="stylesheet">
<style>
#import url('https://fonts.cdnfonts.com/css/benchnine');
</style>
</head>
<body>
<h1 style='font-family:"BenchNine";'>BenchNine 222 444</h1>
<div class="reportGraph" style="width:860px;margin:auto;">
<canvas id="chartJSContainer" height="250"></canvas>
</div>
<script>
var options = {
type: "bar",
data: {
datasets: [
{
label: "20. June. 2021 01:08",
data: [98,92,94,98,100,96,28,-18,96,70],
borderColor: "black",
backgroundColor: "transparent",
type: "line",
borderWidth: 1,
lineTension: 0,
fill: false
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
min: -100,
max: 100
}
}],
xAxes: [{
labels: ["111", "222", "333", "444", "555", "666", "777", "888", "999", "000"],
scaleLabel: {
fontFamily: "BenchNine",
fontColor: "red"
}
}
]
},
responsive: true
}
};
var chart = new Chart(document.getElementById("chartJSContainer"), options);
</script>
</body>
</html>
Instead of specifying the fontFamily and fontColor for the scaleLabel which is the scale title you need to specify it in the ticks part, to achieve this just change scaleLabel to ticks
Live example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.ico">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill.min.js"></script>
<link href="https://fonts.cdnfonts.com/css/benchnine" rel="stylesheet">
<style>
#import url('https://fonts.cdnfonts.com/css/benchnine');
</style>
</head>
<body>
<h1 style='font-family:"BenchNine";'>BenchNine 222 444</h1>
<div class="reportGraph" style="width:860px;margin:auto;">
<canvas id="chartJSContainer" height="250"></canvas>
</div>
<script>
var options = {
type: "bar",
data: {
datasets: [{
label: "20. June. 2021 01:08",
data: [98, 92, 94, 98, 100, 96, 28, -18, 96, 70],
borderColor: "black",
backgroundColor: "transparent",
type: "line",
borderWidth: 1,
lineTension: 0,
fill: false
}]
},
options: {
scales: {
yAxes: [{
ticks: {
min: -100,
max: 100
}
}],
xAxes: [{
labels: ["111", "222", "333", "444", "555", "666", "777", "888", "999", "000"],
ticks: {
fontFamily: "BenchNine",
fontColor: "red"
}
}]
},
responsive: true
}
};
var chart = new Chart(document.getElementById("chartJSContainer"), options);
</script>
</body>
</html>
I'm using chart.js in a plain JavaScript page and the chart is coming up as blank. I am not getting any errors in the Google Chrome console. Below is the code I am using
<!DOCTYPE html>
<html lang="en">
<head th:replace="fragments/header :: head('Home')"></head>
<body>
<header th:replace="fragments/header :: header"> </header>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class="container">
<div>
<canvas id="myChart" width="200" height="200"></canvas>
</div>
</div>
<script>
const labels = [
'January',
'February',
'March',
'April',
'May',
'June',
];
const chartData = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45],
}]
};
const config = {
type: 'line',
chartData,
options: {}
};
var myChart = new Chart(
document.getElementById('myChart'),
config
);
</script>
<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
</body>
Can chart.js be using with plain JavaScript? Is there anything wrong with the code I am using?
Please assign data key in config to assign chartdata
const labels = [
'January',
'February',
'March',
'April',
'May',
'June',
];
const chartData = {
labels: labels,
datasets: [{
label: 'My First dataset',
data: [0, 10, 5, 2, 20, 30, 45],
}]
};
const config = {
type: 'line',
data: chartData,
options: {}
};
var myChart = new Chart(
document.getElementById('myChart'),
config
);
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class="container">
<div>
<canvas id="myChart" width="200" height="200"></canvas>
</div>
</div>
I have this Alpaca form
I would like to get the content of the form (the values the user enters)
so I found an example on alpaca site
The example is working fine when the button is inside this.getValue(); is working fine
But from outside I am getting TypeError: $(...).getValue is not a function
What am I doing wrong?
$("#field1").alpaca({
"data": {
"firstName": "John",
"lastName": "McClane"
},
"schema": {
"type": "object",
"properties": {
"firstName": {
"type": "string",
"title": "First Name"
},
"lastName": {
"type": "string",
"title": "Last Name"
}
}
},
"options": {
"form": {
"buttons": {
"submit": {
"title": "Serialize - working fine....",
"click": function() {
var value = this.getValue();
alert(JSON.stringify(value, null, " "));
}
}
}
}
}
});
<!-- jquery -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- bootstrap -->
<link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- handlebars -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<!-- alpaca -->
<link type="text/css" href="//cdn.jsdelivr.net/npm/alpaca#1.5.27/dist/alpaca/bootstrap/alpaca.min.css" rel="stylesheet" />
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/alpaca#1.5.27/dist/alpaca/bootstrap/alpaca.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/handlebars#latest/dist/handlebars.js"></script>
<div id="field1" ></div>
<button onclick="console.log(JSON.stringify($('#field1').getValue(), null, ' '))">Serialize - Not working ....</button>
You should add alpaca() between $('#field1') and getValue()
JSON.stringify($('#field1').alpaca().getValue()
Here's a fiddle for that.
I'm using webpack-dev-server with this config:
import webpack from 'webpack';
import autoprefixer from 'autoprefixer';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';
const exports = {
devtool: 'cheap-module-source-map',
entry: {
bundle: `${__dirname}/src/main.ejs`,
commons: [
'lodash',
'webpack-dev-server/client?http://localhost:8090',
'webpack/hot/only-dev-server'
]
},
module: {
rules: [
{
test: /\.(js)?$/,
include: `${__dirname}/src`,
loader: 'babel-loader'
}, {
test: /\.(scss|css)$/,
include: [
`${__dirname}/src`
],
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'postcss-loader', 'sass-loader']
})
}, {
test: /\.(ejs)$/,
include: `${__dirname}/src`,
use: 'ejs-render-loader'
}, {
test: /\.(png|jpg|gif)$/,
include: [
`${__dirname}/src`
],
loader: 'file-loader'
}, {
test: /\.svg/,
include: [
`${__dirname}/src`
],
loader: 'file-loader?mimetype=image/svg+xml'
}, {
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
include: [
`${__dirname}/src`
],
loader: 'file-loader?mimetype=application/font-woff'
}, {
test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
include: [
`${__dirname}/src`
],
loader: 'file-loader'
}
]
},
resolve: {
extensions: ['.js', '.ejs', '.scss']
},
output: {
path: `${__dirname}/dist`,
filename: 'bundle.js'
},
devServer: {
contentBase: `${__dirname}/dist`,
publicPath: 'http://localhost:8090',
hot: true,
historyApiFallback: true,
host: 'localhost',
port: 8090,
inline: true
},
plugins: [
new ExtractTextPlugin('styles.css'),
new webpack.optimize.CommonsChunkPlugin({
name: 'commons',
filename: 'commons.js',
minChunks: Infinity
}),
new CaseSensitivePathsPlugin(),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [autoprefixer({
browsers: [
'last 2 Chrome versions',
'last 2 Firefox versions',
'last 2 edge versions',
'IE >= 9',
'Safari >= 7',
'iOS >= 7'
]
})]
}
}),
new HtmlWebpackPlugin({
filename: 'index.html',
hash: true,
template: 'src/main.ejs'
})
]
};
module.exports = exports;
and my main.ejs file looks like that:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css" />
<title>Webpack App</title>
</head>
<body>
<div id="app">
<% include components/navigation/navigation.ejs %>
</div>
</body>
</html>
The case is, that webpack-dev-server doesn't rebuild when any of my other .ejs file are changed (eg. components/navigation/navigation.ejs which I've included in main.ejs), it only rebuilds when I apply any change to main.ejs file. I've searched web to find solution to that, but without any success.
Run it in watch mode:
$ webpack-dev-server --watch
or in webpack.config.js:
devServer: {
watchContentBase: true,
}
So, I just started working with Sencha Touch. I want to include a list in a TabPanel but for some reason it isn't working. Please help. Thanks!
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script src="lib/touch/sencha-touch.js" type="text/javascript"></script>
<script src="app/app.js" type="text/javascript"></script>
<script src="app/rosterData.js" type="text/javascript"></script>
<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet"type="text/css" />
<link href="app/myAppStyle.css" rel="stylesheet" type="text/css" />
</head>
<body></body>
</html>
Javascript:
MyApp=new Ext.Application({
name: 'MyApp',
launch: function() {
MyApp.tabbedView= new Ext.TabPanel({
cardSwitchAnimation: 'slide',
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [{
title: "Schedule",
cls: 'card',
iconCls: 'time',
style: "background-color: #000",
},
{
title: "Roster",
layout: 'fit',
cls: 'card',
iconCls: 'team',
xtype: 'list',
store: MyApp.RosterStore,
itemTpl: '<div class="contact"><strong>{firstName}</strong> {lastName}</div>'
style: "background-color: #aaa",
},
{
title: "Info",
html: "Bye",
cls: 'card homeScreen',
iconCls: 'info',
style: "background-color: #aaa",
}
]
});
Ext.regModel('PlayerName', {
fields: ['firstName', 'lastName']
});
MyApp.RosterStore= new Ext.data.Store({
model: 'PlayerName',
data: [
{firstName: "Shivam", lastName: "Thapar"},
{firstName: "Last", lastName: "First"},
{firstName: "Bob", lastName: "Smith"}
]
});
MyApp.Viewport= new Ext.Panel({
fullscreen: true,
layout: 'fit',
style: "background-color: #fee",
items: [MyApp.tabbedView]
});
}
});
Try putting your model and store definitions above the TabPanel definition.
Model first
Store next
and then TabPanel