By 승민 백

04 Jun 2017 08:25 English 6 Replies

Hi teachers :)

I want to get input text from user.

So.. I'm using input tag.

How can I get text value from html when user finished text input.

I want to get value in java script code.

Or should I use specific tizen api?

Edited on 05 06, 2017

Responses

6 Replies

Marco Buettner

05 Jun 2017 03:12

var input = document.querySelector('#authKey');

function onChange(e) {
    var target = e.target;

    console.log("target text := " + target.value)
}

input.addEventListener('change', onChange);

Reply to this post
Mark as answer

André Reus

05 Jun 2017 03:36

//html
<input placeholder="word" type="text" name="word" id="authKey"/>
<button class="ui-button" id="cng-button">add</button>

//main.js 
 function buttonCallBack()
    {
        var word = document.getElementById('authKey');
    	console.log(word.value);
    }
	
var cngbutton = document.getElementById('cng-button');
cngbutton.addEventListener('click', buttonCallBack);

You can try above code.

Reply to this post
Mark as answer

승민 백

08 Jun 2017 09:08

Thank you for replies :)

I have one more question.

These code what you guys taught me, is fully works in index.html.

But if I use these code in another html,

app.js (82) :TypeError: 'null' is not an object (evaluating 'document.getElementById('authButton').addEventListener')

I think app.js couldn't get object from another html file.

I used both querySelector and getElementById.

app.js(82) code is -> document.getElementById('authButton').addEventListener('click', onClick);

So.. what should I do to get object from html file.

This is my another html code.

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width,user-scalable=no">
   <title></title>
   <link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
   <link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
   
   <link rel="stylesheet" href="css/style.css">
   <script src="app.js"></script>
   <script src="lowBatteryCheck.js"></script>
</head>
<body>
   <div>
       <button id="authButton">add</button>
    </div>
   <script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
</body>
</html>

Reply to this post
Mark as answer

Marco Buettner

09 Jun 2017 12:31

include app.js and lowBatteryCheck.js after tau.min.js

Reply to this post
Mark as answer

승민 백

12 Jun 2017 11:37

I decide to use just one html file.

In that html file, I devided pages.

And thanks so much guys, I finished my school project well.

Reply to this post
Mark as answer

André Reus

13 Jun 2017 01:05

glad to know that :-)

Yes, this trick is better. Also easy to handle multi pages.

Reply to this post
Mark as answer

User Menu

Tizen Forums

Community

Community

Responses

Search form

Responses