Putting html icon into table using java function
Question
Im trying to make icon from FontAwesome html icon code to tranfer the value to java code to display in a table however the text and icon is being sent but the icon is not displaying properly in the table so how am i able to make the icon display properly. I've tried using appendChild() but i couldnt get it to work....
var row=2; function show() { var datee= document.getElementById("dte").value; var dayy = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; var d = new Date(datee); var dayName = dayy[d.getDay()]; var table = document.getElementById("tablee"); var cel=document.getElementById("celsius").value; var weth=document.getElementById("icon").value; var far=(cel*9/5)+32; var curr_date = d.getDate(); var curr_month = d.getMonth() + 1; var curr_year = d.getFullYear(); var DATE = (curr_date + "/" + curr_month + "/" + curr_year); var add = table.insertRow(row); var add1= add.insertCell(0); var add2= add.insertCell(1); var add3= add.insertCell(2); var add4= add.insertCell(3); var add5= add.insertCell(4); add1.innerHTML =DATE; add2.innerHTML =dayName; add3.innerHTML = cel; add4.innerHTML = far; add5.innerHTML = weth; row++; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="PairQ2.css"> <script src = "PairQ2.js"></script> <script src='https://kit.fontawesome.com/a076d05399.js'></script> </head> <body> <label>Please select a date and enter temperature in celsius</label></br></br> <label for="dte">Date:</label> <input type="date" id="dte" name="dte"></br></br> <label for="celsius">Celsius:</label> <input type="number" id="celsius" name = "celsius"></br></br> <label>Select suitable weather :</label> <select class="fa" id="icon" > <option class="fa">  Cloudy</option> <option class="fa">  Sunny</option> <option class="fa">  Windy </option> <option class="fa">  Drizzle </option> <option class="fa">  Heavy Rain </option> <option class="fa">  Thunderstorm</option> </select> <table id = "tablee"> <tr> <th rowspan = "2">Date</th> <th rowspan = "2">Day</th> <th colspan = "2">Temperature</th> <th rowspan = "2">Weather</th> </tr> <tr> <th>Celsius</th> <th>Fahrenheit</th> </tr> </table></br></br> <input type= "button" value="Submit" onclick="show()"> </body> </html>
1 answers
solution1
0 2020-09-26 08:21:31
the icon renders with the help of class associated with that element. since you are only taking the value of the option thus HTML is not able to recognize that icon .
To render it properly use add5.classList.add('fa'); after assigning value to add5 object so that icon can be rendered properly.
var row = 2; function show() { debugger; var datee = document.getElementById("dte").value; var dayy = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; var d = new Date(datee); var dayName = dayy[d.getDay()]; var table = document.getElementById("tablee"); var cel = document.getElementById("celsius").value; var weth = document.getElementById("icon").value; var far = (cel * 9 / 5) + 32; var curr_date = d.getDate(); var curr_month = d.getMonth() + 1; var curr_year = d.getFullYear(); var DATE = (curr_date + "/" + curr_month + "/" + curr_year); var add = table.insertRow(row); var add1 = add.insertCell(0); var add2 = add.insertCell(1); var add3 = add.insertCell(2); var add4 = add.insertCell(3); var add5 = add.insertCell(4); add1.innerHTML = DATE; add2.innerHTML = dayName; add3.innerHTML = cel; add4.innerHTML = far; add5.innerHTML = weth; add5.classList.add('fa'); row++; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="PairQ2.css"> <script src="PairQ2.js"></script> <script src='https://kit.fontawesome.com/a076d05399.js'></script> </head> <body> <label>Please select a date and enter temperature in celsius</label></br> </br> <label for="dte">Date:</label> <input type="date" id="dte" name="dte"></br> </br> <label for="celsius">Celsius:</label> <input type="number" id="celsius" name="celsius"></br> </br> <label>Select suitable weather :</label> <select class="fa" id="icon"> <option class="fa">  Cloudy</option> <option class="fa">  Sunny</option> <option class="fa">  Windy </option> <option class="fa">  Drizzle </option> <option class="fa">  Heavy Rain </option> <option class="fa">  Thunderstorm</option> </select> <table id="tablee"> <tr> <th rowspan="2">Date</th> <th rowspan="2">Day</th> <th colspan="2">Temperature</th> <th rowspan="2">Weather</th> </tr> <tr> <th>Celsius</th> <th>Fahrenheit</th> </tr> </table> </br> </br> <input type="button" value="Submit" onclick="show()"> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Putting image in table using innerHTML (Javascript / Html)
Putting Json in to HTML table
floating text and icon in html table using bootstrap
HTML Knockout add FontAwesome icon into table using Unicode
Putting JavaScript data inside an HTML table cell
Putting HTML Table into ToolTip in D3.js
Putting information in a html property to be accessible in a JS function
putting html inside an iframe (using javascript)
HTML mailto function with icon class
Putting icon next to button
Related Tags