Vue cloning issue - javascript

I am learning vue and one of the things I would like to do is to clone elements. I was playing with this code:
var multiple = new Vue({
el: '#vue',
data: {
},
methods: {
cloneWidget(e) {
let widgets = document.getElementById('widgets');
let widget = document.getElementById('widget');
clone = widget.cloneNode(true);
clone.id = Math.round(Math.random()*100);
widgets.appendChild(clone);
},
deleteClone(e) {
e.target.parentNode.remove();
}
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="styles.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
</head>
<body>
<h1>Cloning</h1>
<div id="vue">
<form #submit.prevent>
<div id="widgets">
<div id="widget">
<div>
<label for="field1">Field 1:</label>
<input type="text" name="field1">
</div>
<div>
<label for="field2">Field 2:</label>
<input type="text" name="field2">
</div>
<i class="material-icons delete" #click="deleteClone">delete</i>
</div>
</div>
<button #click="cloneWidget">Add Widget</button>
</form>
</div>
<script src="app.js"></script>
</body>
</html>
However, the deleteClone method never gets called outside the original div="widget".
I can't seem to figure out why the event listener is not getting attached to the clones. Will cloneNode() mess up Vue?


With Vue, generally you want to think in terms of data. Here is your example revised, such that a widget is rendered for each object in the widgets array.
In this case, the contents of the array don't make much sense; you would probably want to the properties of each object in the array to match your input fields, but this is just an example to get you going.
var multiple = new Vue({
el: '#vue',
data: {
widgets:[{}]
},
methods: {
addWidget() {
this.widgets.push({})
},
removeWidget(widget) {
this.widgets.splice(this.widgets.findIndex(w => w === widget), 1)
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" rel="stylesheet"/>
<h1>Cloning</h1>
<div id="vue">
<form #submit.prevent>
<div id="widgets">
<div v-for="widget in widgets">
<div>
<label for="field1">Field 1:</label>
<input type="text" name="field1">
</div>
<div>
<label for="field2">Field 2:</label>
<input type="text" name="field2">
</div>
<i class="material-icons delete" #click="removeWidget(widget)">delete</i>
</div>
</div>
<button #click="addWidget">Add Widget</button>
</form>
</div>
For the most part, you want to stay away from manipulating the DOM directly and let Vue do the work for you.

Related

Uncaught TypeError: Cannot read properties of null (reading 'vlaue')

A few days ago, I started studying DOM and I tried to clone the code the Instagram for practicing. At this moment, I got this error message "Uncaught TypeError: Cannot read properties of null (reading 'vlaue')" This is my DOM(JS file)
const id = document.getElementById('text')
const password = document.getElementById('password')
document.addEventListener('keyup', function(e) {
if(!id.value && !password.value){
let color = document.querySelector('login-btn');
color.style.backgroundColor = "#FF0000";
}
});
and this is my index.html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Westagram!
</title>
<link rel="stylesheet" href="style/login.css" type="text/css">
<link rel="stylesheet" href="style/common.css" type="text/css">
<!-- <link rel="stylesheet" href="js/login.js"> -->
</head>
<body>
<!-- 아래 모든 div들을 포함하는 제일 상위 Container -->
<div class="wrapper">
<div class="logo">
<p class="westagram">Westagram</p>
</div>
<!-- 로그인 섹션 -->
<div class="login-container">
<div class="id">
<input type="text" id="text" placeholder="Phone number, username, or email" />
</div>
<div class="pw">
<input type="password" id="password" placeholder="Password">
</div>
<div class="bt">
<button class="login-btn">Log in
</button>
</div>
</div>
<!-- 비밀번호 찾는 섹션 -->
<div class="click">
<a class="find-password">Forgot Password</a>
</div>
</div>
<script src="js/login.js"></script>
</html>
I tried const id = blabla.value
password = blabla.value
Also, I tried using "querySelctor" all of them but still have same issue. Could you help me out this error? I really appreciate it! I struggling with this whole day...
Thank you for helping me out in advance.

I've added an else block, hope you won't mind, it's meant to make the difference. If you are using querySelector you must add the . class symbol, before login-btn like that .login-btn Additionally - you do not close the body tag.
If you set JavaScript in the head tag, you need to use the script tag for that, not link tag. For example, like <script src = "script.js" defer> </script>
Now It's should works fine, Best regards !
const id = document.getElementById("text");
const password = document.getElementById("password");
document.addEventListener("keydown", function (e) {
if (!id.value && !password.value) {
let color = document.querySelector(".login-btn");
color.style.backgroundColor = "#FF0000";
} else {
let color = document.querySelector(".login-btn");
color.style.backgroundColor = "#008000";
}
});
<body>
<div class="wrapper">
<div class="logo">
<p class="westagram">Westagram</p>
</div>
<div class="login-container">
<div class="id">
<input
type="text"
id="text"
placeholder="Phone number, username, or email"
/>
</div>
<div class="pw">
<input type="password" id="password" placeholder="Password" />
</div>
<div class="bt">
<button class="login-btn">Log in</button>
</div>
</div>
<div class="click">
<a class="find-password">Forgot Password</a>
</div>
</div>
<script src="js/login.js"></script>
</body>

you should use identifiers when querySelector is in your code so:
let color = document.querySelector('.login-btn');

Reuse function to delete an item

I want to make a button that adds and removes items.
The 'Delete form' button changes to 'Add form' after click it.
But after I've deleted and added forms, I want to delete forms again, but for reasons I don't understand, it doesn't happen.
I'm using the latest chrome browser version.
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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.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>
<title>Task 1</title>
</head>
<body style="height: 100%">
<div class="container h-100">
<div class="row h-100 justify-content-center align-content-center">
<div class=""><button type="button" class="btn btn-primary">Open Google</button></div>
<div class=""><button type="button" class="btn btn-danger" id="danger">Delete form</button></div>
<div class="breaker w-100" style="height:10%;"></div>
<form id="form">
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>
document.getElementsByClassName('btn-primary')[0].addEventListener("click", open_google);
document.getElementsByClassName('btn-danger')[0].addEventListener("click", delete_function);
let inner_form = document.getElementById('form').innerHTML;
function open_google() {
window.open('http://google.com', '_blank');
}
let buttons;
function button_change(button) {
switch(button) {
case "success":
buttons = document.getElementsByClassName('btn');
buttons[1].innerHTML = 'Add form';
buttons[1].className = 'btn btn-success';
document.getElementsByClassName('btn-success')[0].addEventListener("click", add_function);
break;
case "danger":
buttons = document.getElementsByClassName('btn');
buttons[1].innerHTML = 'Delete form';
buttons[1].className = 'btn btn-danger';
break;
default:
break;
}
}
function delete_function() {
let element = document.getElementById('form');
while (element.firstChild) {
element.removeChild(element.firstChild);
}
button_change("success");
}
function add_function() {
document.getElementById('form').innerHTML = inner_form;
button_change("danger");
}
Example code: https://codepen.io/anon/pen/xNjPYj

The event listeners aren't being removed, so both functions are being called (potentially multiple times) depending on how many times the buttons are clicked.
Personally, I think it would be easier to create two buttons, each with independent click handlers, and hide/show them according to which one was clicked.
However, to resolve the current issue in your code, you'll need to remove the previous event listener using removeEventListener() before attaching the new one.

Why don't you just hide it? This is much easier
function toggle() {
var element = document.getElementById("form");
if (element.style.display === "none") {
element.style.display = "block";
}
else {
element.style.display = "none";
}
}
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<title>Task 1</title>
</head>
<body style="height: 100%">
<div class="container h-100">
<div class="row h-100 justify-content-center align-content-center">
<div class=""><button type="button" class="btn btn-primary">Open Google</button></div>
<div class=""><button onclick="toggle()" type="button" class="btn btn-danger" id="danger">Delete form</button></div>
<div class="breaker w-100" style="height:10%;"></div>
<form id="form">
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
</div>
</div>
</body>
</html>

The main issue with your code was that the event listeners kept getting added but not removed, this caused them to pile up and run unpredictably. I added a function that determines what state the button is in and performs the correct function add_function or remove_function.
I also changed a few minor things
Now usesinnerHTML to textContent where possible for security
Button classes are updated using button.classList.add and button.classList.remove
The button is found using an ID instead of an unreliable classname
The button is held in a variable instead of continuing the look for it
Removed the button_change function because it was difficult to refactor
https://codepen.io/anon/pen/BexJZW
JavaScript:
document.getElementsByClassName('btn-primary')[0].addEventListener("click", open_google);
let inner_form = document.getElementById('form').innerHTML;
let add_delete_button = document.querySelector('#add-delete-button');
add_delete_button.addEventListener("click", on_add_delete_clicked);
function open_google() {
window.open('http://google.com', '_blank');
}
function on_add_delete_clicked() {
let is_adding = add_delete_button.classList.contains("btn-success");
if (is_adding) {
add_function();
} else {
delete_function();
}
}
function add_function() {
const button = add_delete_button;
document.getElementById('form').innerHTML = inner_form;
// Update button
button.textContent = 'Delete form';
button.classList.remove("btn-success");
button.classList.add("btn-danger");
}
function delete_function() {
let element = document.getElementById('form');
while (element.firstChild) {
element.removeChild(element.firstChild);
}
// Update button
const button = add_delete_button;
button.textContent = 'Add form';
button.classList.remove("btn-danger");
button.classList.add("btn-success");
}
HTML:
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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.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>
<title>Task 1</title>
</head>
<body style="height: 100%">
<div class="container h-100">
<div class="row h-100 justify-content-center align-content-center">
<div class=""><button type="button" class="btn btn-primary">Open Google</button></div>
<div class=""><button type="button" class="btn btn-danger" id="add-delete-button">Delete form</button></div>
<div class="breaker w-100" style="height:10%;"></div>
<form id="form">
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>

This implementation will do the text and context switching you desire.
function action(mouseevent) {
const button = mouseevent.target;
let element = document.getElementById('form');
if(element.firstChild) {
while (element.firstChild) {
element.removeChild(element.firstChild);
}
button.innerHTML = 'Add form';
button.classList.remove('btn-danger');
button.classList.add('btn-success');
} else {
document.getElementById('form').innerHTML = inner_form;
button.innerHTML = 'Delete Form';
button.classList.add('btn-danger');
button.classList.remove('btn-success');
}
}

How to go to a link with using Javascript?

Hello I have this code using javascript & html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Signup Form</title>
<!-- css -->
<link rel="stylesheet" href="style.css">
<style>
.box {
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
</style>
<!-- js -->
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div class="hero is-fullheight is-info is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title has-text-centered">Test</h1>
<div class="box">
<!-- our signup form ===================== -->
<form id="signup-form" #submit.prevent="processForm">
<!-- name -->
<div class="field">
<label class="label">Username</label>
<input
type="text"
class="input"
name="name"
v-model="name">
</div>
<!-- email -->
<div class="field">
<label class="label">Password</label>
<input
type="password"
class="input"
name="email"
v-model="email"
#blur="validateEmail">
<p class="help is-danger" v-if="errors.email">
Please enter a valid email.
</p>
</div>
<!-- submit button -->
<div class="field has-text-right">
<button type="submit" class="button is-danger">
Log In
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
var app = new Vue({
el: '#signup-form',
data: {
name: '',
email: '',
errors: {
name: false,
email: false
}
},
methods: {
processForm: function() {
console.log({ name: this.name, email: this.email });
onclick="test.html";
},
validateEmail: function() {
const isValid = window.isValidEmail(this.email);
this.errors.email = !isValid;
}
}
});
function isValidEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
</script>
</body>
</html>
And I would want that when I click on the button I can go to the page by the name of test.html I tried to use href = "test.html but it does not work. I think I have to write it in Javascrit but even using action = "test.html" it does not work...
Could you help me please ?
Thank you very much!

It seems like what you're trying to do is redirect to a new page. Try:
window.location = "test.html";
instead of:
onclick="test.html";
to my knowledge, all onclick="test.html" does is create a variable "onclick" with the string value "test.html". Setting window.location with the URL you would like to redirect to will navigate the user to that URL. More on window.location here: https://developer.mozilla.org/en-US/docs/Web/API/Window/location

How to push element in array of JSON

This is my controller from which I am requesting to POST the data on server. While I am able to POST title and rating, i am unable to POST any genres because Genres is an array. How to push the data in Genres Array?
app.controller('addTrack', function ($scope, $http) {
$scope.tracks = [];
var genre = [];
var pushing = genre.push($scope.add_genre);
$scope.add_track = "";
$http.get('http://104.197.128.152:8000/v1/tracks?page=48')
.then(function (response) {
$scope.tracks = response.data.results;
});
$scope.add = function (event) {
if (event.keyCode == 13) {
$http.post('http://104.197.128.152:8000/v1/tracks', {
title: $scope.add_title,
rating: $scope.add_rating,
})
.then(function (data) {
$scope.genres = data;
//console.log($scope.add_genre);
$scope.add_title = '';
$scope.add_rating = '';
$scope.add_genre = '';
});
$http.get('http://104.197.128.152:8000/v1/tracks?page=48')
.then(function (response) {
$scope.genres = response.data.results;
});
}
} });
Http POST to http://104.197.128.152:8000/v1/tracks
Accepted response
{
"title": "animals",
"rating": 4.5,
"genres": [
1
]
}
Providing you my HTML as well.
<!DOCTYPE html>
<html ng-app="musicApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container" ng-controller="addTrack">
<div>
<h1>Add New Track</h1>
</div>
<div class="form-group">
<label>Title:</label>
<input type="text" class="form-control" ng-model="add_title" placeholder="Type to add new Title">
</div>
<div class="form-group">
<label>Genre:</label>
<input type="text" class="form-control" ng-model="add_genre" placeholder="Type to add new Genre">
</div>
<div class="form-group">
<label>Rating:</label>
<input type="text" class="form-control" ng-model="add_rating" placeholder="Type to add new Rating" ng-keyup="add($event)">
</div>
<div class="clearfix">
<button class="btn btn-primary col-xs-12 bottom-button" value="click" id="button">Add a New Track</button>
</div>
<div class="clearfix">
<label>Available Tracks</label>
<ul class="list-group" ng-repeat="track in tracks">
<li class="list-group-item clearfix"><span class="pull-left title">{{track.title}}</span> <span class="genre">[{{track.genres[0].name}}]</span> <span class="pull-right rating">{{track.rating}}</span></li>
</ul>
</div>
</div>
</body>
</html>

If what you are trying to achieve is to add a track object with title, rating and genre, you need to change your whole logic so your controller will bind all inputs to the same object properties.
First you need to define a track object in your controller, and bind the inputs to its properties in your HTML:
JavaScript:
app.controller('addTrack', function($scope, $http) {
$scope.tracks = [];
$scope.track = {
title: '',
rating: 0,
genre: ''
};
$http.get('http://104.197.128.152:8000/v1/tracks?page=48')
.then(function(response) {
$scope.tracks = response.data.results;
});
$scope.add = function(event) {
if (event.keyCode == 13) {
$http.post('http://104.197.128.152:8000/v1/tracks', $scope.track)
.then(function(data) {
$scope.track = {};
});
}
}
});
HTML:
<!DOCTYPE html>
<html ng-app="musicApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container" ng-controller="addTrack">
<div>
<h1>Add New Track</h1>
</div>
<div class="form-group">
<label>Title:</label>
<input type="text" class="form-control" ng-model="track.title" placeholder="Type to add new Title">
</div>
<div class="form-group">
<label>Genre:</label>
<input type="text" class="form-control" ng-model="track.genre" placeholder="Type to add new Genre">
</div>
<div class="form-group">
<label>Rating:</label>
<input type="text" class="form-control" ng-model="track.rating" placeholder="Type to add new Rating" ng-keyup="add($event)">
</div>
<div class="clearfix">
<button class="btn btn-primary col-xs-12 bottom-button" value="click" id="button">Add a New Track</button>
</div>
</div>
</body>
</html>
Note:
Note the use of ng-model="track.title", ng-model="track.rating"
and ng-model="track.genre" in the HTML to bind these inputs to our
trackobject properties.
This code assumes that genre will be a string here, if you will use a
list of object you need to amend your code so it fits this option.

uncaught type error: undefined is not a function

Im making a simple form with Telerik Appbuilder HTML5 + javascript that takes a users input and logs it to the console when they click the submit button.
ClientClass.js:
function Client() {
this.username = "username",
this.password = "Password",
this.printUsername = function() {
this.username=$("#Username").val()
console.log(this.username);
};
};
Home.html:
<div data-role="view" data-title="Login" data-layout="main" data-model="APP.models.login">
<script src="../scripts/ClientClass.js"></script>
<h1 data-bind="html: title"></h1>
<script src="../scripts/ClientClass.js"></script>
<script>
function printUsername() {
var client = new client();
client.printUsername();
}
</script>
<ul data-role="listview" data-style="inset">
<li>
<label>Username
<input type="text" value="" id="Username" />
</label>
</li>
<li>
<label>Password
<input type="password" value="" />
</label>
</li>
<li>
<label>
<button onclick="printUsername()" type="button">Submit</button>
</label>
</li>
</ul>
</div>
Index.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/ClientClass.js"></script>
</head>
<body>
<script src="scripts/ClientClass.js"></script>
<script src="scripts/ClientClass.js"></script>
<div data-role="layout" data-id="main">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<!-- application views will be rendered here -->
<label>
<input type="password" value="password" />
</label>
<div data-role="footer">
<div data-role="tabstrip">
Home
Settings
Contacts
</div>
</div>
</div>
</body>
</html>
It says in the console:
uncaught type error: undefined is not a function.
Then it says it is at index.html#views/home.html:1 and when I click that and it takes me to sources panel of the debugger. And it says the source is index.html and it says:
(function() {with (this[2]) {with (this[1]) {with (this[0]) {return function(event) {printUsername() }; }}}})
Does anyone see any issues with my html or javascript? Or the way I import the script? Thanks

you are declaring your client as an object, not as a "class". So using new on your object doesn't make quite sense.
So it's up to you or you keep your object and simply remove:
var client = new client();
or you use a class
function Client(){}

Categories