---https://blog.hiratama.net/typescript-webpack-vuejs-step1/
このサイトに従って環境を構築しTs+VueをビルドしてJsファイルを作ったのですがうまく動きません。擬態的にはonClickメソッドを呼び出した時に
VM213 index.html:19 Uncaught ReferenceError: doClick is not defined
at HTMLInputElement.onclick (VM213 index.html:19)
というエラーが出てしまいます。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 6 <meta charset="UTF-8"> 7 <title>Study Vue Step1</title> 8 9 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 10 11</head> 12 13<body> 14 <div id="app"></div> 15 16 17 <input type="text" id="name" /> 18 <input type="text" id="age" /> 19 20 <input type="button" name="this_button" id="#btn" value="ボタン" onclick="doClick();" /> 21 22 23 <div id="msg"></div> 24 25 <script src="./js/app.js"></script> 26</body> 27 28</html>
TypeScript
1import Vue from 'vue' 2 3let app:Vue = new Vue({ 4 el: '#app', 5 render: (h)=>h('p', 'Hello, world.') 6}); 7 8class Person{ 9 name:string; 10 age:number; 11 12 constructor(n:string,a:number){ 13 this.name = n; 14 this.age = a; 15 } 16 17 print():string{ 18 let msg = "<p>Name=" + this.name + ". Age=" + this.age + "</p>"; 19 return msg; 20 } 21} 22 23function doClick():void{ 24 let name:HTMLInputElement = document.querySelector("#name"); 25 let name_value:string = name.value; 26 let age:HTMLInputElement = document.querySelector("#age"); 27 let age_value:number = parseInt(age.value); 28 29 let person:Person = new Person(name_value,age_value); 30 31 let msg:HTMLElement = document.querySelector("#msg"); 32 msg.innerHTML = person.print(); 33} 34 35
javascript
1文字数を超えてしまったのでここにのせました 2https://codeshare.io/Gqp1zZ
回答1件
あなたの回答
tips
プレビュー