Это вопрос конкатенации строк.Вам необходимо объединить вашу переменную firstcolor
с атрибутом bgcolor
вашего заголовка:
var fheader = '<table border="1" bgcolor="'+firstcolor+'" \n';
В примечании, не следует использовать атрибут bgcolor
.Вместо этого используйте CSS в атрибуте style
:
var fheader = '<table border="1" style="background-color:'+firstcolor+'" \n';
function createTable() {
var rowVar = document.getElementById('row').value;
var columnVar = document.getElementById('column').value;
var firstcolor = document.getElementById('first-color').value;
var fheader = '<table border="1" style="background-color:'+firstcolor+'" \n';
var fbody = '';
for (var i = 0; i < rowVar; i++) {
fbody += '<tr>';
for (var j = 0; j < columnVar; j++) {
fbody += '<td>';
fbody += '';
fbody += '</td>'
}
fbody += '</tr>\n';
}
var ffooter = '</table>';
document.getElementById('table').innerHTML = fheader + fbody + ffooter;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Table Form">
<meta name="keywords" content="Modulor, Test, Frontend Development, Table Form">
<meta name="author" content="Shirin Doroudian">
<title>Table Form</title>
<link rel="stylesheet" type="text/css" href="style3.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="left-side">
<h1>Create your customized table!</h1>
<form name="table" id="form">
<div class="form-row">
<label class="form-label" for="row">Choose number of rows (2-10):</label>
<input type="number" min="2" max="10" name="row" id="row">
</div>
<div class="form-row">
<label class="form-label" for="column">Choose number of columns (2-10):</label>
<input type="number" min="2" max="10" name="column" id="column">
</div>
<div class="form-row">
<label class="form-label" for="first-color">Choose the first color:</label>
<input type="color" name="first-color" id="first-color" >
</div>
<div class="form-row">
<label class="form-label" for="second-color">Choose the second color:</label>
<input type="color" name="second-color" id="second-color" >
</div>
<input name="generate" id="button-form" type="button" class="button form-row" value="Create Table!" onclick='createTable();'>
</form>
</div>
<div id="right-side">
<div id="table"></div>
</div>
</div>
</body>
</html>