We Keep Coding

Javascript: How to get an element by ID then add/place the element into an inline style

If possible, I would like javascript to first get an element by an ID that is placed into a table. Then add/place said element into the inline style (width="XX%") of a different div.
Note: I do not have control over the ID's output. Just know that said value will determine the width of the percentage bar.
getelementbyid:
<span *id="per-girls*">**95**</span>
place element into inline css:
<div class="bar bar1" style="width: **95**%;"></div>
$(function(){
$("#dTable").dataTable({
"columns": [
{
"title":"Languages"
},
{
"title":"Votes",
"render": function(data, type, row, meta){
return parseInt(row[1], 10) + parseInt(row[2], 10) + parseInt(row[3], 10)
}
},
{
"visible":false
},
{
"title": "Positive/Neutral/Negative",
"sortable":false,
"render": function(data, type, row, meta){
return $("<div></div>", {
"class": "bar-chart-bar"
}).append(function(){
var bars = [];
for(var i = 1; i < Object.keys(row).length; i++){
bars.push($("<div></div>",{
"class": "bar " + "bar" + i
}).css({
"width": row[i] + "%"
}))
}
return bars;
}).prop("outerHTML")
}
}
]
});
});
.bar-chart-bar {
background-color: #e8e8e8;
display: block;
position:relative;
width: 100%;
height: 40px;
}
.bar {
position: absolute;
float: left;
height: 100%;
}
.bar1 {
background-color: #007398;
z-index: 40;
}
.bar2 {
background-color: #00b0b9;
width: 100%;
z-index: 20;
}
<div class="col-sm-12">
<table id="dTable" cellspacing="0" width="100%" role="grid" aria-describedby="dTable_info">
<tbody>
<tr role="row">
<td style="width: 20%;"> % of girl gamers</td>
</td>
<td style="width: 10%;"> <span id="per-girls">95</span>% </td>
<td>
<div class="bar-chart-bar bar-girl">
<div class="bar bar1" style="width: 20%;"></div>
<div class="bar bar2"></div>
</div>
</td>
</tr>
<tr role="row">
<td> % of boy gamers</td>
</td>
<td><span id="per-boy">57</span>% </td>
<td>
<div class="bar-chart-bar bar-boy">
<div class="bar bar1" style="width: ;"></div>
<div class="bar bar2"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>

Instead of setting the width of a div (which you could also do with this same approach), it seems more elegant to me to use a background gradient to do the fill.
In the snippet below a custom css property is used to inform a linear gradient that fills the bar. By changing the property's value you can set the percentage filled:
function setBar(valueElemId) {
// find the element
const valueElem = document.getElementById(valueElemId);
// get its text as a numeric value
const value = Number(valueElem.textContent);
// find the nearest TR parent and set the css custom property
// that the linear-gradient uses to fill the bar
valueElem.closest('tr').style=`--pct: ${value}`;
}
// invoke setBar for each id
['per-girls', 'per-boy'].forEach(setBar);
:root {
--pct: 0; /* no fill by default */
}
.bar-chart-bar {
min-height: 30px;
background: #00b0b9; /* the background/base color */
background-image: linear-gradient(90deg,
#007398 0 calc(var(--pct) * 1%), /* from 0 to --pct */
transparent calc(var(--pct) * 1%) /* leave the rest transparent */
);
}
<div class="col-sm-12">
<table>
<tbody>
<tr>
<td style="width: 20%;"> % of girl gamers</td>
<td style="width: 10%;"> <span id="per-girls">95</span>% </td>
<td>
<div class="bar-chart-bar"></div>
</td>
</tr>
<tr>
<td> % of boy gamers</td>
<td><span id="per-boy">57</span>% </td>
<td>
<div class="bar-chart-bar"></div>
</td>
</tr>
</tbody>
</table>
</div>

Unable to populate a list of data into table dynamically

Functionality:
I have a String of data =>("A, 4.0. 00:04#B,5.0,00:05#C,9.0,00:09#......"). The String will be split into individual element, and the individual element will be appended to the tag in the table. Whereby, it will look like:
A 00:04
B 00:05
C 00:09
....
G 00:29
Issue:
Currently, the entire table just looks like this:
G 00:29
2.
3.
.....
10.
Hence, the last value of the data is just appended to the first row of the table.
I am not sure if this is the correct method of populating the within the . Please help.
Code:
console.log("Leaderboard: " + data);
var playerList = data.split("#");
var innerList;
for (i = 0; i < playerList.length; i++) {
innerList = playerList[i].split(",");
console.log(innerList[0] + "|" + innerList[1] + "|" + innerList[2]);
//innerList[0] ==> A to be appended to Player_Name
//innerList[1] ==> 4.0 not needed to be appended
//innerList[2] ==> 00:04 to be appended to Player_Score
$("#Player_Name").html(innerList[0]);
$("#Player_Score").html(innerList[2]);
}
#Rugby_Scoreboard {
position: absolute;
left: 335px;
top: 182px;
width: 825px;
height: 818px;
border-spacing: 5px;
border-collapse: collapse;
}
<!-- ScoreBoard -Table form-->
<div id="Game_LeaderBoard" style="position:absolute; z-index:6; top:0px; left:0px; width: 1920px; heigth: 1000px; margin:auto;">
<table id="Rugby_Scoreboard">
<tr>
<td>
<div id="Player_Name" style="z-index:50; position:absolute; top:5px; left:150px; font-size:40px; font-family:'OpenSans-Light'; width:1080; color:#fff;">
<font face="OpenSans-Light"></font>
</div>
</td>
<td>
<div id="Player_Score" style="z-index:50; position:absolute; top:5px; left:700px; font-size:40px; font-family:'OpenSans-Light'; width:1080; color:#fff;">
<font face="OpenSans-Light"></font>
</div>
</td>
</tr>
</table>
</div>

You can use destructuring assignment and trailing comma to exclude 4.0 from result of .split(), use multiple selectors at jQuery(), call .html(function) to set html of both elements
var data = "A,4.0,00:04#B,5.0,00:05#C,9.0,00:09";
console.log("Leaderboard: " + data);
var playerList = data.split("#");
console.log(playerList)
var innerList;
for (i = 0; i < playerList.length; i++) {
var [name,,score] = playerList[i].split(",");
//innerList[0] ==> A to be appended to Player_Name
//innerList[1] ==> 4.0 not needed to be appended
//innerList[2] ==> 00:04 to be appended to Player_Score
$("#Player_Name, #Player_Score")
.html(function(index, html) {
var prop = index === 0 ? name : score;
return html + prop + "<br>"
})
}
/*
#Rugby_Scoreboard {
position: absolute;
left: 335px;
top: 182px;
width: 825px;
height: 818px;
border-spacing: 5px;
border-collapse: collapse;
}
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- ScoreBoard -Table form-->
<div id="Game_LeaderBoard" style="">
<table id="Rugby_Scoreboard">
<tr>
<td>
<div id="Player_Name" style="">
<font face="OpenSans-Light"></font>
</div>
</td>
<td>
<div id="Player_Score" style="">
<font face="OpenSans-Light"></font>
</div>
</td>
</tr>
</table>
</div>

All this code is doing is replacing the contents of a set of elements.
With this part inside the loop:
$("#Player_Name").html(innerList[0]);
$("#Player_Score").html(innerList[2]);
You're replacing the same contents over and over.
If you want each of the values to show in the table, you need to create new <tr> elements and append them to the end of the <table> element.
$('#Rugby_Scoreboard').append('<tr><td><div id="Player_Name_' + innerList[0] + '">' +
innerList[2] +
'</div></td></tr>`);

Control Angular ng-show by the controller

How can i show the element using ng-show which i can control by my controller using boolean value?
(Everything in the controller works fine except this button)
This is my modal html.
<div class="modal-box modal-confirm-pickup-box" ng-show="showPickupModal">
<div class="modal-container modal-confirm-pickup-container">
<div class="modal-container-content">
<div class="modal-container-content-header">
<strong>
Login
</strong>
</div>
<div class="modal-container-content-body">
aaaaaaaeoa
</div>
</div>
</div>
</div>
This is my code in the controller
.controller('venderConsole', ['$scope','$http', function ($scope,$http) {
$scope.showPickupModal = false;
$('.close-modal-box-bt').click(function(event) {
/* Act on the event */
$('.modal-box-login').css('display','none');
$.ajax({
url: 'json/multipleOrder.json', //Server script to process data
type: 'get',
beforeSend: function(xhr){
},
success: function(data){
$scope.orders = data.data
// $scope.ordersList = $scope.orders[0].products;
// console.log(orderSize);
$scope.getTotal = function(order){
var total = 0;
for(var i = 0; i < order.products.length; i++){
var subtotal = order.products[i].subtotal;
total += subtotal;
}
return total;
}
$scope.$apply();
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest);
alert(textStatus);
}
});
});
}]);
This is my button html.
<table id="front-table" class="table table-bordered" ng-show="!vendorPageToggle">
<thead>
<tr class="table-head-text-center">
<th></th>
<th>Order</th>
<th>฿ Total</th>
<th>Address</th>
<th>Comment</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="order in orders">
<th class="text-center">
<span class="table-order-number">
<strong>{{ order.id }}</strong>
</span>
<br>
<span>{{ order.customer.name }}</span>
<br>
<br>
<span>{{ order.estimated_pickup }}</span>
</th>
<td>
<span ng-repeat="product in order.products">
1 X {{ product.name }} <br>
<span ng-repeat="extra in product.extras">
<span ng-repeat="item in extra.items">
-- ext {{ item }}
<br>
</span>
</span>
<br>
</span>
</td>
<td>{{ getTotal(order) }}</td>
<td>
{{ order.customer.address.address1 }}
<br>
{{ order.customer.address.address2 }}
<br>
{{ order.customer.address.suburb }}
<br>
{{ order.customer.address.city }}
<br>
<br>
<strong>
<i class="icon ion-iphone" style="font-size: 24px;"></i> {{ order.customer.phone }}
</strong>
</td>
<td>aaaa</td>
<td class="text-center">
<button class="button button-balanced order-bt" ng-click="showPickupModal = !showPickupModal">
button-balanced
</button>
</td>
</tr>
</tbody>
</table>
my Css
.modal-box {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
/*display: none;*/
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-container {
position: relative;
width: auto;
margin: 10px;
}
.modal-container-content {
position: relative;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.2);
border-radius: 20px;
outline: 0;
overflow: hidden;
}
.modal-container-content-header {
background-color: #FF0000;
color: #fff;
text-align: center;
font-size: 32px;
height: 80px;
padding-top: 28px;
}
.modal-container-content-body {
padding: 15px;
background-color: #EEEEEE;
}
But when i click my button nothing happened, my modal still not appear same as the beginning.
How can i fix this.
Thanks!

Here is your code working as expected: JS Fiddle
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller('ctrl', function ($scope) {
$scope.hello = 'Ohh, hello there!';
$scope.showPickupModal = false;
});
</script>
<div ng-app='app' ng-controller='ctrl'>
<button class="button button-balanced order-bt" ng-click="showPickupModal = !showPickupModal">
button-balanced
</button>
<div class="modal-box modal-confirm-pickup-box" ng-show="showPickupModal">
<div class="modal-container modal-confirm-pickup-container">
<div class="modal-container-content">
<div class="modal-container-content-header"> <strong>
Login
</strong>
</div>
<div class="modal-container-content-body">{{hello}}</div>
</div>
</div>
</div>
</div>
If this don't solve your problem, post more code so we can see what is wrong that your controller is not working properly.
EDIT with new full code
Working Plunker
Ok, I don't know why your code does not work. But, just to test things up, I like to don't do anything on the view. So, I've removed your code on the html and exchanged by a function. Like this:
ng-click='showPickupModal = !showPickupModal'
This was removed by this:
ng-click='togglePickupModal()'
and, on the controller, I've added this function and, before any console.log to test, it just worked.
$scope.togglePickupModal = function () {
$scope.showPickupModal = !$scope.showPickupModal;
};
You haven't showed your code for '.close-modal-box-bt', so I've used the toggle function to close the modal too. Problem solved.

jquery - showing box with if statement by click on button when field is completed - quiz creation

I'm desperately trying to create something very simple for you!
Here's my problem:
I'd like to create a small quiz in which when someone writes anything in a field (), and then click the button "ok" (not sure if I should use a or a ), then 3 possibilities arise (for each case a box appearing under the field input):
The answer is exact and correctly written: then the text will be "Great job!"
The answer is almost correct, meaning that the word is not correctly written (we can define if necessary "almost answers"): the text will be "Almost there..."
The answer is completely wrong, the text will be "Try again!"
Right now I have that:
<body>
<div>
<table>
<tbody>
<tr>
<td>To whom it belongs?</td>
</tr>
<tr>
<td>
<img src="#" alt="Tim's coat" width="100%"/>
</td>
</tr>
<tr>
<td class="answer-box">
<input type="text" class="field-answer" placeholder="Write it there!">
<button id="showresult" class="button-answer" value="Ok">OK</button>
</td>
</tr>
<tr>
<td>
<div class="res" id="switch">Great job!</div>
<div class="res" id="switch2">Almost there...</div>
<div class="res" id="switch3">Try again!</div>
</td>
</tr>
</tbody>
</table>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
var artist = ["abba"];
var almostartist = ["abaa", "aaba", "aabaa"];
$(document).ready(function(){
$('.field-answer').bind('keyup', function(){
if("#showresult").click(function() {
if($.inArray($(this).val().toLowerCase().trim().replace(/[^\w\s\-\_!##\$%\^\&*\\")\(+=._-]/g, ''), artist) >= 0){
$('#switch').show('good');
}
else if($.inArray($(this).val().toLowerCase().trim().replace(/[^\w\s\-\_!##\$%\^\&*\\")\(+=._-]/g, ''), almostartist) >= 0){
$('#switch2').addClass('soso');
if{
$('#switch3').addClass('non');
}
else {
$('#switch3').removeClass('non');
}
});
});
}
</script>
But of course this is not working...
In case, my CSS is here:
.res {
display: none;
color: white;
font-weight: bold;
text-align: center;
background-color: #490058;
height: 75px;
max-width: 100%;
line-height: 70px;
font-size: 140%;
}
.res.good {
display: block;
}
.res.soso {
display: block;
}
.res.non {
display: block;
}
.answer-box {
text-align: center;
}
.button-answer {
border: none;
background-color: #490058;
color: white;
font-size: 120%;
font-weight: bold;
padding: 8px;
left: 260px;
}
.field-answer {
text-align: center;
border: none;
border-bottom: 2px solid black;
background-color: transparent;
max-width: 230px;
height: 40px;
font-size: 20px;
text-transform: uppercase;
outline: 0;
}
Someone could help me to figure that out, please?
I'm quite sure I'm not far, but cannot solve it...
If you need more precisions on stuffs, please don't hesitate! ;)
Thanks guys!
Baptiste

A slightly different approach - no better than any other suggestion - FIDDLE.
JS
var artist = ["abba"];
var almostartist = ["abaa", "aaba", "aabaa"];
$('.field-answer').focus(function(){
$('.res').css('display', 'none');
$(':input').val('');
});
$('#showresult').on('click', function(){
useranswer = $('.field-answer').val();
useranswer = useranswer.toLowerCase().trim().replace(/[^\w\s\-\_!##\$%\^\&*\\")\(+=._-]/g);
if( $.inArray( useranswer, artist ) === 0 )
{
$('#switch1').css('display', 'block');
}
else if ( $.inArray( useranswer, almostartist ) >= 0 )
{
$('#switch2').css('display', 'block');
}
else //if ( $.inArray( useranswer, almostartist ) < 0 )
{
$('#switch3').css('display', 'block');
}
});

your whole function is bound in to 'keyup' event.
keyup event only occurs once when key is released from pressed.
try deleting bind('keyup', function)

I've found a solution to your problems.
Check this Fiddle
In this script every time you click on the button the field text is compared with the values of the array
Depending on the value of the the corrisponding div is showed.
code
<script type="text/javascript">
$(document).ready(function(){
var artist = ["abba"];
var almostartist = ["abaa", "aaba", "aabaa"];
$("#showresult").click(function() {
var text=$('.field-answer').val();
if(artist.indexOf(text) > -1){
$('#switch').show();
}
else if(almostartist.indexOf(text) > -1){
$('#switch2').show();
}
else{$('#switch3').show();}
});
});
</script>
if you want the message appears on keyup you have to use this code
<script type="text/javascript">
$(document).ready(function(){
var artist = ["abba"];
var almostartist = ["abaa", "aaba", "aabaa"];
$(".field-answer").on('keyup',function() {
$('.res').hide()
var text=$('.field-answer').val().toLowerCase();
if(artist.indexOf(text) > -1){
$('#switch').show();
}
else if(almostartist.indexOf(text) > -1){
$('#switch2').show();
}
else{$('#switch3').show();}
});
});
</script>
If you like one of these solutions remember to falg in green my answer ;) thanks.

Hiding and entire form element

This should have been pretty straightforward using the DOM but I seem to be getting undefined errors.
Basically, I'm trying to say, when a user clicks a button hide one form and replace it with another. Hiding it should have been as simple as setting style.display : none; but it seems style is constantly undefined.
Here's the script
function hideTextForm()
{
var textForm = document.getElementsByClassName("my-text-form");
//var formContent = textForm.contentDocument;
console.log(formContent);
//textForm.visibility='false';
//textForm.visible(false);
//textForm.style.visibility = "hidden";
//formContent.display = "none";
formContent.style.display = "none";
console.log(textForm);
/*this returns:
<div class="my-list-form">
<form id="list-form" class="list-form" name="list-form">
<label>list form here</label>
</form>
</div>*/
console.log("Text form should be hidden");
}
This is only half the different attempts. My gut tells me that the way I'm calling the element is wrong with getElementsByClassName. I'm either calling the wrong element or trying to display it wrong.
Heres the HTML:
<div class="analysis">
<div class="analysis-columns">
<div class="analysis-static">
<table align = "left" border ="1" id="static-column-table" class="my-columns" >
<tr id="tr-static">
<th id="table-comment-head">
<b>Comments</b>
</th>
</tr>
<tr><td><button class="column-button" value="Page Description">Page Description</button></td></tr>
<tr><td><button class="column-button" value="Keywords">Keywords</button></td></tr>
<tr><td><button class="column-button" value="Files">Files</button></td></tr>
<tr><td><button class="column-button" value="Internal Links">Internal Links</button></td></tr>
<tr><td><button class="column-button" value="External Links">External Links</button></td> </tr>
</table>
</div>
<div class="analysis-custom">
<table border ="1" align="right" id="custom-column-table" class="my-columns" >
<tr id="tr-custom">
<th>Custom</th>
</tr>
<tr><td><button class="column-button" value="Page Description">Page Description</button></td></tr>
<tr><td><button class="column-button" value="Keywords">Keywords</button></td></tr>
<tr><td><button value="Add">Add New Field+</button></td></tr>
</table>
</div>
</div>
<div class="analysis-form">
<input type="radio" name="type-of-row" value="List" title="List" onclick="hideTextForm();"/> List</br>
<input type="radio" name="type-of-row" value="Text" title="Text" onclick="hideListForm();"/> Text</br>
<select>
<optgroup label="Type of Row">
<option>List</option>
<option>TextBox</option>
</optgroup>
</select>
</br>
<div class="my-list-form">
<form name ="list-form" class = "list-form" id="list-form">
<label>list form here</label>
</form>
</div>
<div class="my-text-form">
<form name="text-form" class = "text-form" id="text-form">
<label>text form here</label>
<!--<textarea cols="30" rows="2">Enter the name of your new Row here...</textarea>
<button value="Page Description" onclick="addRow()">New TextField</button>-->
</form>
</div>
</div>
</div>
And finally relevant CSS:
div.analysis
{
padding: 1px;
width: 100%;
border: .2em solid #ffcc00;
}
div.analysis-columns
{
/* border-style: solid;*/
border: .2em solid #900;
float: left;
width:55%;
/*border: 5;
border-color: #8a2be2;*/
display: inline;
}
div.analysis-static
{
margin: auto;
padding: 1px;
width:47%;
float:left;
border: .2em solid #0000ff;
/*border: 3;
border-color: #0000FF;*/
/*border-collapse:collapse;*/
font-family: Century Gothic, sans-serif;
}
div.analysis-custom
{
margin: auto;
border: .2em dotted #FFFFDD;
padding: 1px;
float: right;
width:47%;
}
div.analysis-form
{
margin: auto;
width:43%;
border: .2em ridge #b22222;
float: right;
}
div.my-list-form
{
display: inherit;
}
div.my-text-form
{
display: inherit;
}
If anyone is having trouble visualizing it or running it, basically I have a small panel called analysis. Within this panel, is 2 tables (left) and one changing form on the right.
my-list-form and my-text-form should be the only css to worry about.
I'm convinced I'm calling the element wrong so please take a look at document.getElem("my-text-form") and what it returns.

getElmentsbyclassname returns an array
check below link
https://developer.mozilla.org/en/DOM/document.getElementsByClassName

Have a look at the method you're calling -- getElementsByClassName. Look at what it returns. It is not a DOM element -- it is something called a NodeList. This is an object a bit like an array (though technically not an array) that contains all the elements with that class name. A NodeList doesn't have a style property, so you can't set it.
You need to get the first element in the NodeList (using the array notation [0]) and set the style property of that.
var textForm = document.getElementsByClassName("my-text-form")[0];
textForm.style.display = 'none';

formContent[0].style.display = "none".
If you are working with getElementsByClassName, you're always returned an array, so you want to use the first element of that array