Input text in Javascript

  • HTML input tag
  • Get Input value
  • Concat strings

We are displaying an input box for the user to input their name. When clicking a button we display the name in a HTML element.

file: index.html

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Input Text in Javascript</title>
</head>
<body>
    <h1>Input Text Application</h1>
    Input your name: 
    <input id="name" type="text" >
    <button id="myButton">Press Me</button>
    <div id="message"></div>
    
    <script src="main.js"></script>
</body>
</html>

file: main.js

/**
 * This application shows how to read the value from an input field.
 */

console.log('Starting App')

// Get a reference of the DOM elements
const nameInput = document.getElementById('name')
const button = document.getElementById('myButton')
const messageElement = document.getElementById('message')

// When the button is click it will execute a function.
// This function gets the value of the name input and displays it in the message div element.
button.addEventListener('click', function(){
    const name =nameInput.value
    messageElement.textContent = 'Hello ' + name
})

Sample: http://javascript.kennyming.com/code/3-input-text-javascript/

Code: https://github.com/kennymingt/javascript/tree/master/code/3-input-text-javascript

Read More

Using Buttons in JavaScript

  • Console message for debug
  • Constants
  • Add Events listeners to DOM Elements
  • functions

We are going to display a message when we click a button.

We have two elements with Id in the HTML, the button and a div to display a message.

file: index.html

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Buttons in JavaScript</title>
</head>
<body>
    <h1>Using Buttons App</h1>
    <div id="messageElement"></div>
    <button id="myButton">Press Me</button>
    <script src="main.js"></script>
</body>
</html>

In our JavaScript file we grab a reference to elements in the HTML. We add a function to the Click event of the button.

file: main.js

/**
 * Using Buttons in Javascript demo app
 */

console.log('Starting Application')

// Get a rerference to DOM elements: the div for the message, and the button
const messageElement = document.getElementById('messageElement')
const myButton = document.getElementById('myButton')

// Respond to click events
myButton.addEventListener('click', function(){
    console.log('Button Clicked!')
    messageElement.textContent = 'ButtonClicked'
})

alt buttons in javascript Sample: http://javascript.kennyming.com/code/2-buttons-in-javascript/

Code: https://github.com/kennymingt/javascript/tree/master/code/2-buttons-in-javascript

Read More

Displaying Text in JavaScript

  • Create a basic html
  • Set the page title
  • Display static header text
  • Include a javascript file in our html
  • Get a reference to an html element and chage its text content.

The html page for the application. We will use a div to display text to the user. we set an id for the div so we can grab it from javascript. And we also include our javascript file. file: index.html

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Display Info App</title>
 </head>
 <body>
  <h1>Display Information Application</h1>
  <div id="info"></div>
  <script src="main.js"></script>
 </body>
</html>

File: main.js

/**
* Main application
* */
const info = document.getElementById('info')
info.textContent('Helloworld!")

That’s it. We can open our index.html file in chrome, just double click it, and we will see our hello world! message displayed on the webpage.

Sample Page: http://javascript.kennyming.com/code/1-displaying-text/

Sample Code: https://github.com/kennymingt/javascript/tree/master/code/1-displaying-text

Read More