Languages

Menu
Sites
Language
Can I get text value by input tag?

Hi teachers :)

I want to get input text from user.

So.. I'm using input tag.

 

<input type="text" style="text-align:center" id="authKey" placeholder="input key"></input>

 

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 by: 승민 백 on 04 Jun, 2017
List

Responses

6 Replies
Marco Buettner 
var input = document.querySelector('#authKey');

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

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

input.addEventListener('change', onChange);

 

André Reus

hi

//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. 

 

승민 백

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">
    <!-- load theme file for your application -->
    <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>

 

 

 

Marco Buettner

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

승민 백

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.

André Reus

glad to know that :-) 

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