<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> </div> </nav> <div class="col-md-6 well"> <hr style="border-top:1px dotted #ccc;"/> <div class="col-md-8"> <input type="text" name="text" id="inputText" style="width:140px;"/> <input type="text" id="size" style="width:50px;" disabled = "disabled"/> </div> </div> </body> </html>
var size = 14; var color = "#000000" var data = document.getElementById("inputText"); var display = document.getElementById('display'); var font = document.getElementById('size'); var arrayColor=["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#000000"] display.style.fontSize= size + "px"; display.style.color=color; font.value = size; data.onkeyup = function(){ display.innerHTML = inputText.value; } function increaseFont(){ size++; display.style.fontSize= size + "px"; font.value = size; } function decreaseFont(){ size--; if(size < 1){ size = 1; } display.style.fontSize= size + "px"; font.value = size; } function changeColor(){ var rand = arrayColor[Math.floor(Math.random() * arrayColor.length)]; display.style.color=rand; }