I am starting with HTML and Javascript and I intend to collect the value of the text input with id "login" and show it when I press the "login" button and nothing appears, I think the javascript does not recognize me. This is the HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>login</title>
<script>
window.resizeTo(700,900);
</script>
</head>
<body>
<div class="app">
<table id=tabla style="width:100%">
<tr>
<th> <input type="text" class="input" id="login" placeholder="Su API_KEY de Trello"/> </th>
<div id="txt"></div>
</tr>
<tr>
<th> <form action="https://trello.com/app-key/">
<input type="submit" class="nobutton"value="Consiga su API_KEY aquí"/>
</form>
</th>
</tr>
<tr>
<th>
<input type="button" name="button"class="button" value="Login"onclick ="myfuncion()"/>
<p id="demo">hola</p>
</th>
</tr>
</table>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
This is the index.js
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
function myfuncion() {
var x = document.getElementById("login").value;
document.getElementById("demo").innerHTML = x;
}
};
Actually your problem is that you have your function included within the scope of an object, so you will have to reference that object from the HTML as well.
Also, you have misdefined the function inside the object. It should be of the form:
Your corrected example: