As exercise, I'm creating a simple quiz app without using jQuery. I'm trying to add radio buttons as answer options using javascript
html body as follows
<div class="row">
<div class="col-md-6 col-md-offset-3">
<p id="question"></p>
<form name="answers">
<fieldset class="form-group">
<div class="form-check" id="answersId">
</div>
</fieldset>
</form>
</div>
</div>
my js script below would add radio buttons within div class="form-check"
function firstQuestion() {
var answerSection = document.getElementById("answersId");
for(var i = 0; i < allQuestions[0].choices.length; i++) {
var radioElement = [];
radioElement[i] = document.createElement("input");
radioElement[i].setAttribute("class", "form-check-input");
radioElement[i].setAttribute("type", "radio");
radioElement[i].setAttribute("name", "choice");
radioElement[i].setAttribute("value", i);
var label = [];
label[i] = document.createElement("label");
label[i].setAttribute("class", "form-check-label");
var labelText = [];
labelText[i] = document.createTextNode(allQuestions[0].choices[i]);
label[i].appendChild(radioElement[i]);
label[i].appendChild(labelText[i]);
answerSection.appendChild(label[i]);
};
}
I'm not able to get the bootstrap appearance, i.e.:
-each radio button is inline, rather than in a new line (arranged vertically)
-spacing between the button and label is not like bootstrap example
Why is this so? Could someone point out to me?
thats because bootstrap relies on jquery, you can't expect bootstrap to work without jquery
var answerSection = document.getElementById("answersId");
var radioElement = [];
var label = [];
var labelText = [];
var span;
for (i = 1; i < 4; i++) {
span = document.createElement("span");
span.setAttribute("style", "padding:15px");
radioElement[i] = document.createElement("input");
radioElement[i].setAttribute("class", "form-check-input");
radioElement[i].setAttribute("type", "radio");
radioElement[i].setAttribute("name", "choice");
radioElement[i].setAttribute("value", i);
label[i] = document.createElement("label");
label[i].setAttribute("class", "form-check-label");
labelText[i] = document.createTextNode("choice " + i);
label[i].appendChild(radioElement[i]);
label[i].appendChild(labelText[i]);
span.appendChild(label[i]);
answerSection.appendChild(span);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-6 col-md-offset-3">
<p id="question"></p>
<form name="answers">
<fieldset class="form-group">
<div class="form-check" id="answersId">
</div>
</fieldset>
</form>
</div>
</div>
You should add these 3 lines to make bootstrap work. These are the CDN links, but if you have these on your computer then add them properly
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
And as said by #leccionesonline bootstrap.min.js requires jquery.min.js file. Hence you should load jquery.min.js before bootstrap.min.js
Here is refrence link
Related
i am very new to google sheets and tryed to use an Userform to fill in my Sheets. But every time, i click submit it just freezes and nothing more happends...
https://docs.google.com/spreadsheets/d/13LdDIMvWpVkj5rom2fHV25FtYvbOcnKr4cZF84nITYQ/edit?usp=sharing
And the code:
HTML:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<form>
<div class="form-group">
<label for="name" class="form-label">name</label>
<input type="text" class="form-control" id="name">
</div>
<div class="form-group">
<label for="price" class="form-label">price</label>
<input type="text" class="form-control" id="price">
</div>
<button type="submit" class="btn btn-primary" id="add" >Submit</button>
</form>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
<script>
function afterButtonClicked(){
var item = document.getElementById("name");
var price = document.getElementById("price");
google.script.run.addnewrow(name,price);
}
document.getElementById("add").addEventListener("click",afterButtonClicked);
<script>
</body>
</html>
Here are my functions:
function addnewRow(nameprice) {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const ws = ss.getSheetByName("Results");
ws.appendRow([name,price]);
}
I dont know if its important, but here is the cutom menu:
function loadForm() {
const htmlForSidebar = HtmlService.createTemplateFromFile("uform");
const htmlOutput = htmlForSidebar.evaluate();
const ui = SpreadsheetApp.getUi();
ui.showSidebar(htmlOutput);
}
function createMenu(){
const ui = SpreadsheetApp.getUi();
const menu = ui.createMenu("Meine Forms");
menu.addItem("Show UserForm","loadForm");
menu.addToUi();
}
function onOpen(){
createMenu();
}
Thank you!
There are few modification in your code:-
In HTML file you've syntax error, you didn't used </script>.
You're passing wrong variable as a argument in addnewRow while running it through google.script.run.
You're trying to run function which actually doesn't exist in server-side.
Parameter in addnewRow function is missing comma , in server-side.
Sheet you're trying to access in ss.getSheetByName("Results") doesn't exist.
Do following modifications in <script> tag of client side code(HTML File):-
<script>
function afterButtonClicked(){
var item = document.getElementById("name").value;
var price = document.getElementById("price").value;
google.script.run.addnewRow(item,price);
}
document.getElementById("add").addEventListener("click",afterButtonClicked);
</script>
And replace this :-
function addnewRow(nameprice) {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const ws = ss.getSheetByName("Results");
ws.appendRow([name,price]);
}
with this :-
function addnewRow(name,price) {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const ws = ss.getSheetByName("Results");
ws.appendRow([name,price]);
}
and change/add the sheet name as Result in Spreadsheet.
I try to build a browser-based text RPG as a project to improve my JavaScript. It looks like this:
Browser based Text RPG.
Now I have one Button with a click EventListener. When the button is clicked, I store the input of the form into a variable called playerName and return the player Name and some text by modifying the innerHTML of an empty paragraph.
JS:
let input = document.querySelector("#input");
let button = document.querySelector("#mainButton");
let textView = document.querySelector("#textView");
let buttonPress = function() {
button.addEventListener("click", function() {
if (input.value.length === 0) {
alert("Please enter a valid Name!");
//Evaluate Player Name
} else if (input.value.length >= 1) {
let playerName = input.value;
input.value = "";
textView.innerHTML = `Hi there ${playerName}, your adventure begins shortly! Where do you come from?`;
input.placeholder = "Origin";
}
});
};
buttonPress();
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>A Tale in Space</title>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="app.css" />
</head>
<body>
<div class="container d-flex justify-content-center align-items-center">
<div class="row justify-content-center align-items-center">
<div
class="col-6 flex-column d-flex justify-content-center align-items-center"
>
<h1 class="text-center">Welcome to A Tale in Space</h1>
<input type="text" name="" id="input" placeholder="Enter your name" />
<button id="mainButton" type="submit" class="btn btn-danger mt-3">
Submit
</button>
<p id="textView" class="text-center mt-5"></p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<script src="app.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
</body>
</html>
I try to figure out what I need to do to basically continue on the same page by pressing the same button. So after the name was returned I would like to change the text, asking the origin of the player by pressing the SAME button. It somehow breaks my brain.
If someone has a better suggestion of displaying my text, I am all ears.
TL;DR: How to use the same button for multiple functions?
Try it to use multiple functions for one button:
button.addEventListener("click", function(){alert("click1")}, false);
button.addEventListener("click", function(){alert("click2")}, false);
I hope this works for you:
add name to input name
<input type="text" name="name" id="input" placeholder="Enter your name" />
Js file :
let button = document.querySelector("#mainButton");
let playerName = "";
let playerOrigin = "";
(function() {
button.addEventListener("click", function() {
let input = document.querySelector("#input");
let textView = document.querySelector("#textView");
if (input.value.length === 0) {
alert("Please enter a valid Name!");
//Evaluate Player Name
} else if (input.value.length >= 1) {
if (input.name === 'name') {
playerName = input.value;
input.value = "";
textView.innerHTML = `Name : ${playerName}, Origin : ${playerOrigin}`;
input.placeholder = "Origin";
input.name = "origin";
} else if (input.name === 'origin') {
playerOrigin = input.value;
input.value = "";
textView.innerHTML = `Name : ${playerName}, Origin : ${playerOrigin}`;
input.placeholder = "Enter your name";
input.name = "name";
}
}
});
})();
I want to change a text and show/hidde an svg icon with classes when click on collapse.
Every time I execute the code above the code executes one more time and I don't know why,
example:
1st time = `alert(show)`
2nd time = `alert(hide), alert(hide)`
3er time = `alert(show), alert(show), alert(show)`
etc...
here is my code:
$('span[name="serviceCollapse"]').click(function() {
var target = $(this).attr("data-target");
var label = $(this).find("label");
var span = $(this);
$(target).on('hide.bs.collapse', function () {
label.text("Mostrar más servicios ");
alert("hide");
var arrowUp = span.find(".d-inline");
var arrowDown = span.find(".d-none");
arrowUp.removeClass("d-inline");
arrowUp.addClass("d-none");
arrowDown.removeClass("d-none");
arrowDown.addClass("d-inline");
});
$(target).on('show.bs.collapse', function () {
label.text("Mostrar menos servicios ");
alert("show");
var arrowDown = span.find(".d-inline");
var arrowUp = span.find(".d-none");
arrowDown.removeClass("d-inline");
arrowDown.addClass("d-none");
arrowUp.addClass("d-inline");
arrowUp.removeClass("d-none");
});
});
EDIT:
Here is the html code:
<div class="col-12 mt-2">
<span name="serviceCollapse" data-target="#service1" data-toggle="collapse">
<label class="text-custom-primary bold-300">Mostrar más servicios </label>
<span class="d-inline">arrowDownSvgIcon</span>
<span class="d-none">arrowUpSvgIcon</span>
</span>
<div id="service1" class="collapse mt-3">
collapsable
</div>
</div>
Actually as per your code you are adding multiple event handlers instead you just need to add event handlers on listeners once initially and that would be it.
Every time click is happening more handlers are appended on the event listeners that's causing the problem.
SOLUTION:
Set the event handler only once. And in the click event of 'serviceCollapse' check for its state to print the alert message.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="col-12 mt-2">
<span class="collapsed" name="serviceCollapse" data-target="#service1" data-toggle="collapse">
<label class="text-custom-primary bold-300">Mostrar más servicios </label>
<span class="d-inline">arrowDownSvgIcon</span>
<span class="d-none">arrowUpSvgIcon</span>
</span>
<div id="service1" class="collapse mt-3">
collapsable
</div>
</div>
<script>
$(document).ready(function() {
var target = $('span[name="serviceCollapse"]').attr("data-target");
$(target).on('hide.bs.collapse', function () {
var label = $(this).find("label");
var span = $(this);
label.text("Mostrar más servicios ");
var arrowUp = span.find(".d-inline");
var arrowDown = span.find(".d-none");
arrowUp.removeClass("d-inline");
arrowUp.addClass("d-none");
arrowDown.removeClass("d-none");
arrowDown.addClass("d-inline");
});
$(target).on('show.bs.collapse', function () {
var label = $(this).find("label");
var span = $(this);
label.text("Mostrar menos servicios ");
var arrowDown = span.find(".d-inline");
var arrowUp = span.find(".d-none");
arrowDown.removeClass("d-inline");
arrowDown.addClass("d-none");
arrowUp.addClass("d-inline");
arrowUp.removeClass("d-none");
});
$('span[name="serviceCollapse"]').click(function() {
console.log($(this).attr("class"));
if ($(this).attr("class") === "collapsed") alert ("show");
else alert("hide");
});
});
</script>
</body>
</html>
I have made a function test tool for my company app using html/css/javascript/node.js/express/tablesorter.
My test tool is successfully performed the function tests.
My table style is from opensource 'Tablesorter'.
This is edit screen. The file is .ejs format. So, Node.js server render the file to html dynamically.
But, I wonder how to insert the row additionally in this table. So, I searched to solve the problem and got some solution like below.
for (var i in rList) {
var table = document.getElementById("ID_Table");
var row = table.insertRow(-1);
var cell1 = row.insertCell(-1);
var cell2 = row.insertCell(-1);
var list = rList[i].split(" ");
cell1.innerHTML = list[0];
cell2.innerHTML = list[1];
}
But, this way is incomplete. The result is like this.
The 'tablesorter' style is not applied to additional rows. I don't know how to solve this.
<!DOCTYPE html>
<html>
<head>
<!-- Character Set -->
<meta charset="utf-8">
<!-- Title -->
<title><%= title %></title>
<!-- Style -->
<link rel='stylesheet' href='/stylesheets/style.css'/>
<!-- JS -->
<script src="/javascripts/indexCore.js"></script>
<!-- jQuery -->
<script src="/opensources/tablesorter/docs/js/jquery-latest.min.js"></script>
<script src="/opensources/tablesorter/docs/js/jquery-ui.min.js"></script>
<!-- Tablesorter: theme -->
<link class="theme default" rel="stylesheet" href="/opensources/tablesorter/css/theme.default.css">
<link class="theme blue" rel="stylesheet" href="/opensources/tablesorter/css/theme.blue.css">
<link class="theme green" rel="stylesheet" href="/opensources/tablesorter/css/theme.green.css">
<link class="theme grey" rel="stylesheet" href="/opensources/tablesorter/css/theme.grey.css">
<link class="theme ice" rel="stylesheet" href="/opensources/tablesorter/css/theme.ice.css">
<link class="theme black-ice" rel="stylesheet" href="/opensources/tablesorter/css/theme.black-ice.css">
<link class="theme dark" rel="stylesheet" href="/opensources/tablesorter/css/theme.dark.css">
<link class="theme dropbox" rel="stylesheet" href="/opensources/tablesorter/css/theme.dropbox.css">
<link class="theme metro-dark" rel="stylesheet" href="/opensources/tablesorter/css/theme.metro-dark.css">
<!-- Tablesorter script: required -->
<script src="/opensources/tablesorter/js/jquery.tablesorter.js"></script>
<script src="/opensources/tablesorter/js/widgets/widget-filter.js"></script>
<script src="/opensources/tablesorter/js/widgets/widget-stickyHeaders.js"></script>
<script id="js">
$(function(){
/* make second table scroll within its wrapper */
$('#ID_Table').tablesorter({
widthFixed : true,
headerTemplate : '{content} {icon}', // Add icon for various themes
widgets: [ 'zebra', 'stickyHeaders', 'filter' ],
widgetOptions: {
// jQuery selector or object to attach sticky header to
stickyHeaders_attachTo : '.wrapper' // or $('.wrapper')
}
});
$("#ID_Table tbody").click(function () {
//$(this).addClass('selected').siblings().removeClass('selected');
//alert('a');
});
});
</script>
<script>
$(function() { //이 부분은 렌더링 되자마자 실행되는 부분
window.includeCaption = true;
$('.caption').on('click', function(){
includeCaption = !includeCaption;
$(this).html( '' + includeCaption );
$('#ID_Table').each(function(){
if (this.config) {
this.config.widgetOptions.stickyHeaders_includeCaption = includeCaption;
this.config.widgetOptions.$sticky.children('caption').toggle(includeCaption);
}
});
});
// removed jQuery UI theme because of the accordion!
$('link.theme').each(function(){ this.disabled = true; });
var themes = 'dropbox blue green grey ice black-ice dark default metro-dark', //테마 순서
i, o = '', t = themes.split(' ');
for (i = 0; i < t.length; i++) {
o += '<option value="' + t[i] + '">' + t[i] + '</option>';
}
$('select:first')
.append(o)
.change(function(){
var theme = $(this).val().toLowerCase(),
// ui-theme is added by the themeswitcher
files = $('link.theme').each(function(){
this.disabled = true;
})
files.filter('.' + theme).each(function(){
this.disabled = false;
});
$('table')
.removeClass('tablesorter-' + t.join(' tablesorter-'))
.addClass('tablesorter-' + (theme === 'black-ice' ? 'blackice' : theme) );
}).change();
});
</script>
</head>
<body>
<div id="header">
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
Main
Edit
Blank
<hr/>
</div>
<div id="wrap">
<div id="Main_Screen">
<input type="button" value="로딩" id="btn" onclick="dynamicLoadScript_Main('/temps/MainScript.js', '/temps/WrapScript.js')"></input>
<input type="button" value="수행" id="btn1" onclick="Automation()"></input>
<button type="button">결과 리스트 출력</button>
</div>
<div id="List_Screen" class="narrow-block wrapper">
Theme: <select></select>
<table id="ID_Table" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th>Function</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
This is my .ejs File.
And, this is printResult Function in indexCore.js.
function printResult(){
var rList = resultList.split('\n');
for (var i in rList) {
var table = document.getElementById("ID_Table");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var list = rList[i].split(" ");
cell1.innerHTML = list[0];
cell2.innerHTML = list[1];
}
}
You can edit and apply your logic at the .ejs file directly at your backend as your client side solution seems to be run after table being initialized by Tablesorter. You can also try to implement your client side solution adding the rows to table first then initialize Tablesorter. Good Luck!
This question already has answers here:
Calling functions with setTimeout()
(6 answers)
Closed 6 years ago.
I'm having issues using Javascript to run a function. What I want to happen is I want the function to fire off when the user clicks a button. However, it fires off when the page loads.
Here is the entire code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<input type="submit" id="btn" value="Load">
<div id="description">
<div id="info">
<h1 id="title"></h1>
<p id="description"></p>
<ul id="list"></ul>
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
<script>
var btn = document.getElementById('btn');
var title = document.getElementById('title');
var description = document.getElementById('description');
var list = document.getElementById('list');
btn.onclick = load();
function load() {
alert("Working.");
}
</script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Right now, it obviously doesn't do much except fire off an alert box. But I'll by using it to load in a file via XMLHttpRequest object later. But right now, its not working the way it should.
I should also point out that the code works fine with an anonymous function, But the whole idea is to have a normal function. I'm just not sure why it would work with an anonymous function and not a normal one.
It should be
var btn = document.getElementById('btn');
var title = document.getElementById('title');
var description = document.getElementById('description');
var list = document.getElementById('list');
btn.onclick = load;
function load() {
alert("Working.");
}
DEMO