Javascript button to show on condition - javascript

I am trying to make the button visible only when there's a table shown, but it doesn't seem to be working, the button is not hiding.
PS: Sorry for not clarifying, my javascript runs onload
HTML:
var DLFunc = document.getElementsByTagName("table");
var DLButtons = document.getElementById("tableToCsv");
if (DLFunc == "") {
DLButtons.style.visibility = 'hidden';
} else if (DLFunc != "") {
DLButtons.style.visibility = 'visible';
}
<div id="view-container">
<main ng-view></main>
</div>
<div id="tableToCsv">
<button class="btnCSV">CSV file</button>
</div>
Full HTML:
<body ng-controller="DataController">
<header ng-include="'FixedPages/header.html'"></header>
<div ng-include="'FixedPages/mapAHH.html'"></div>
<div id="view-container">
<main ng-view></main>
</div>
<div id="tableToCsv">
<button class="btnCSV">CSV file</button>
</div>
<footer ng-include="'FixedPages/footer.html'"></footer>
<script src="js\DownloadCSV.js"></script>
</body>

Check if there is a table shown by counting the number of table tags. Instead of checking empty string, check for the length of the array:
var DLFunc = document.getElementsByTagName("table");
var DLButtons = document.getElementById("tableToCsv");
if (DLFunc.length == 0) {
DLButtons.style.visibility = 'hidden';
} else {
DLButtons.style.visibility = 'visible';
}
Also check when the code runs (maybe add an alert) as the tables may not have been created at the time your JS is running.
UPDATE:
Your JS won't pick up the table as it is run on page load, whereas AngularJS probably creates the elements later.
You can add something like the following to your DLButtons HTML:
<button class="btnCSV" *ngShow="hasTable()">CSV file</button>
Then in your Angular Component.ts/js:
hasTable() {
return document.getElementsByTagName("table").length > 0;
}

You can do the following;
// you can check directly in the condition
const DLFunc = document.getElementsByTagName("table");
const DLButtons = document.getElementById("tableToCsv");
if (DLFunc)
{
DLButtons.style.visibility = 'hidden';
}
else
{
DLButtons.style.visibility = 'visible';
}

Try this:
var DLFunc = document.getElementsByTagName("table");
var DLButtons = document.getElementById("tableToCsv");
if (DLFunc.length == 0) {
DLButtons.style.visibility = 'hidden';
} else {
DLButtons.style.visibility = 'visible';
}
<div id="view-container">
<main ng-view></main>
</div>
<div id="tableToCsv">
<button class="btnCSV">CSV file</button>
</div>

Related

Set a dynamic variable?

This may be extremely simple, but my brain's just not grasping this for some reason.
I'm making a Tic-Tac-Toe/Hollywood Squares game, and all the square variables are set to null
square0Value = "";
square1Value = "";
etc.
When you click on one of the squares, it launches a bootstrap modal with a closeup of the square and two buttons, X and O, and passes all of the data from the grid square into the modal, so that I only need one modal markup block.
When you click the X or the O, I need it to dynamically set the square variable, that is associated with the modal to either X or O, once the modal is closed, another javascript function checks all the variables to see if there's a 3-in-a-row occurrence, and displays a console.log that X or O has won the game. But I'm not writing this correctly, and none of the square variables are being set.
Here's my code:
HTML:
<button class="squareButton" data-toggle="modal" data-target="#squareModal" data-square="" data-nameplate="" data-xo="" data-id="square0">
<div class="xo"></div>
<div class="nameplate"></div>
<div class="desk"></div>
</button>
(I have this replicated 9 times.)
[Modal markup]
<div class="modal fade-scale" id="squareModal" tabindex="-1" role="dialog" aria-labelledby="squareModal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="square">
<div class="squareModal">
<div class="xo"></div>
<div class="nameplate"></div>
<div class="desk"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="modalX" class="btn btn-default btn-xo" data-dismiss="modal">X</button>
<button type="button" id="modalO" class="btn btn-default btn-xo" data-dismiss="modal">O</button>
</div>
</div>
</div>
</div>
JS:
I have an array built that populates each square with a celebrity/personality, and an document.ready function that shuffles the array populates the squares:
$(document).ready(function(){
shuffle(squares);
for (i = 0; i < 9; i++) {
$("#square"+i).find('.squareButton').addClass(squares[i][0]);
$("#square"+i).find('.squareButton').data("square", squares[i][0]);
*// the [0] block of the array is a class filler*
$("#square"+i).find('.squareButton').data("nameplate", squares[i][1]);
*// the [1] block of the array is the celebrity's name*
$("#square"+i).find('.nameplate').html(squares[i][1]);
}
});
var square0Value = "";
var square1Value = "";
var square2Value = "";
var square3Value = "";
var square4Value = "";
var square5Value = "";
var square6Value = "";
var square7Value = "";
var square8Value = "";
var squareClass = "";
var squareName = "";
var squareXO = "";
var squareId = "";
$('#squareModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
squareClass = button.data('square');
squareName = button.data('nameplate');
squareXO = button.data('xo');
squareId = button.data('id');
console.log(squareId);
var modal = $(this)
modal.find('.modal-body').addClass(squareClass);
modal.find('.modal-body .nameplate').html(squareName);
modal.find('.modal-body .xo').html(squareXO);
})
$('#squareModal').on('hidden.bs.modal', function (event) {
var modal = $(this);
modal.find('.modal-body').removeClass(squareClass);
checkWin();
});
function clickX(){
$(eval(squareId+'Value')).val("X");
$(eval(squareId)).addClass('selected');
$(eval(squareId)).find(".squareButton").data("xo", "X");
$(eval(squareId)).find(".xo").html("X");
}
function clickO(){
$(eval(squareId)).addClass('selected');
$(eval(squareId+'Value')).val("O");
$(eval(squareId)).find(".squareButton").data("xo", "O");
$(eval(squareId)).find(".xo").html("O");
}
$("#modalX").on("click", function(e){
e.preventDefault();
clickX();
});
$("#modalO").on("click", function(e){
e.preventDefault();
clickO();
});
function checkWin() {
for (i = 0; i < 9; i++) {
console.log("Square"+i+": " + eval('square'+[i]+'Value'));
}
checkWinX();
checkWinO();
if (square0Value != "" && square1Value != "" && square2Value != "" && square3Value != "" && square4Value != "" && square5Value != "" && square6Value != "" && square7Value != "" && square8Value != ""){
checkBoardFull();
}
}
The issue lies in the clickX() and clickO() functions where I am trying to set the value of the (eval(squareId+'Value')) as the X or the O value that is needed. I want to make this as dynamic as possible so don't have to write a function for every modal.
Not sure why you are using eval.
$("#"+squareId).addClass()
may be enough
Here would be my suggestion.
var button = $(event.relatedTarget);
If I am reading this right, that is the button that was clicked that caused the modal to show. If that is the case, then I believe it is a far assumption that only one modal can show at a time. If that is true, then what you can do is make that variable scoped higher, not within that handler.
What does that do for you? Well, if you do that, then you can use that element within your clickX and clickY. For instance...
function clickX(){
button.data('xo', 'X');
button.find('.xo').html('X');
}
I'm unclear what the others are referencing, but if you have the button then you have access to finding it's nested children or looking for parent elements if you need to find them.
So yeah... rebuilding my global Square Values into an array was a MUCH easier way of organizing things... sorry everyone.

JavaScript function to hide buttons if specific text shows

I have a function called hideButtons that i want to hide buttons if certain text is present in the paragraph.
The paragraph goes through a list of names that the user either likes or dislikes and then when there are no more names then the buttons disappear.
Obviously this is sudo at the moment:
function hideButtons(){
if namespace.indexOf("Out of people"){
#likeButton = hidden;
#dislikeButton = hidden;
}
}
This is a working function
function showName(){
var name = names[0];
if (!name){
name = 'Out of people';
}
console.log(names)
document.getElementById('namespace').innerHTML = name;
}
And the html:
<body>
<p id='namespace'> Namelist </p>
<button id="likebutton" type="button">Like</button>
<button id="dislikebutton" type="button">Dislike</button>
</body>
You are sort of mixing up javascript and jQuery.
In javascript, to get the value of a p tag:
var ns = document.getElementById('namespace').innerHTML;
the same thing in jQuery:
var ns = $('#namespace').text();
jQuery uses the CSS selectors to identify elements, javascript does not.
Here is a semi-working version of your code.
var lb = document.getElementById('likebutton');
lb.addEventListener('click', hideButtons, false);
var db = document.getElementById('dislikebutton');
db.addEventListener('click', hideButtons, false);
function hideButtons(){
var ns = document.getElementById('namespace').innerHTML;
alert(ns);
if (ns.indexOf("Namelist") > -1 ){
lb.style.display = 'none';
db.style.display = 'none';
}
}
function showName(){
var name = names[0];
if (!name){
name = 'Out of people';
}
console.log(names)
document.getElementById('namespace').innerHTML = name;
}
<body>
<p id='namespace'>Namelist</p>
<button id="likebutton" type="button">Like</button>
<button id="dislikebutton" type="button">Dislike</button>
</body>
Here is the same code in jQuery:
$('#likebutton, #dislikebutton').click(function(){
var ns = $('#namespace').text();
if ( ns.indexOf('Namelist') > -1 ){
$('#likebutton').hide();
$('#dislikebutton').hide();
}else{
alert('P tag does not contain the word namespace');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<p id='namespace'>Namelist</p>
<button id="likebutton" type="button">Like</button>
<button id="dislikebutton" type="button">Dislike</button>
</body>

javascript copy div change innerHTML id

I need to copy content from one div to another one with changing button's id (increment them)
Sample:
<script type="text/javascript">
function add(){
document.getElementById('two').innerHTML = document.getElementById('one').innerHTML;
}
</script>
<div id="one">
<button id="button_1" >Button_1</button>
</div>
<div id="two"></div>
<button onclick="add();">Add</button>
This of course can't work properly.
Result should be following:
<div id="two">
<button id="button_2" >Button_2</button>
</div>
Any simple way how to do this ?
If you want copy the button onclick of a button it will work for you i guess..
document.getElementById('button').onclick = duplicate;
var i = 0;
var original = document.getElementById('one');
function duplicate() {
var clone = original.cloneNode(true); // "deep" clone
clone.id = "one" + ++i; // there can only be one element with an ID
original.parentNode.appendChild(clone);
}
<div id="one">
<button id="button_1" >Button_1</button>
</div>
<button id="button" style="color:red">Add</button>
I've made small change in 'id' of the wrapping div.
<div id="1" class="button">
<button id="button_1" >Button_1</button>
</div>
<button onclick="add();">Add</button>
<script type="text/javascript">
function add(){
var count = document.querySelectorAll('.button').length;
var newCount = count+1;
var elDiv = document.createElement('div');
elDiv.setAttribute("id", newCount);
elDiv.setAttribute("class", "button");
elDiv.innerHTML = '<button id="button_"+newCount+">Button_'+newCount+"</button>";
document.getElementById(count).appendChild(elDiv);
}
</script>
However it can be done in more simpler way using jQuery. Hope this helps.
Are you looking for something like this. With a good mastery of jQuery traversal you may not even need to give each button an id. May be a common class may serve you well.
$(function() {
var last = $('.container');
var curr = last;
$('#add').on('click', function() {
last = curr.clone();
last.find('button').attr('id', function() {
return 'button_' + ( $('div.container').length + 1 );
})
.html(function() {
return 'Button_' + ( $('div.container').length + 1 );
}).end()
.insertAfter( curr );
curr = last;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button id="button_1" >Button_1</button>
</div>
<button id="add">Add</button>
Using JQuery:
function add( fromId, toId ){
content = $('#'+fromId).clone();
button = content.find('button');
if( button.length == 1 ){
buttonId = button.attr('id');
number = buttonId.match(/\d+/g);
number = parseInt(number[0]) + 1;
button.attr('id','button_' + number);
button.html('Button_' + number);
}
$('#'+toId).html(content.html());
}
Just call
add('one','two');

Change in the JavaScript code timer

I have used the timer in the project. Do not have much familiarity with JavaScript.
I want to add one minute to timer when an event Happened. (without Refresh the page).
JavaScript code:
<div class="auto-due">
<div id="auction">
<div style="float: left;width: auto;" class="soon" id="soon-glow"
data-layout="group overlap"
data-face="slot doctor glow"
data-padding="false"
data-scale-max="l"
data-visual="ring color-light width-thin glow-progress length-70 gap-0 offset-65">
</div>
<div id="auction-info">
<span>Time reminding to end</span> <div class="livicon" data-s="48" data-c="#fff" data-hc="0" data-n="clock"></div>
</div>
</div>
<script>
(function(){
var i=0,soons = document.querySelectorAll('.auto-due .soon'),l=soons.length;
for (;i<l;i++) {
soons[i].setAttribute('data-due','<?= $endDateCountDown ?>');
soons[i].setAttribute('data-now','<?= date("Y-m-d")."T".date("H:i:s") ?>');
}
}());
</script>
<script src="<?= $this->theme->getUrl('js/soon.min.js'); ?>" data-auto="false"></script>
<script>
if ('addEventListener' in document) {
var showDemo = function(e){
var btn = e.target;
btn.style.display = 'none';
var wrapper = e.target.parentNode;
var panel = wrapper.querySelector('.el-sample');
panel.style.display = 'block';
var nodes = e.target.parentNode.querySelectorAll('.soon');
for(var i=0;i<nodes.length;i++){
Soon.create(nodes[i]);
}
};
var buttons = document.querySelectorAll('.demo-button');
for(var i=0;i<buttons.length;i++) {
buttons[i].addEventListener('click',showDemo);
}
}
var soons = document.querySelectorAll('.auto-due .soon');
for(var i=0;i<soons.length;i++) {
Soon.create(soons[i]);
}
</script>
</div>
$endDateCountDown variable show the end time and date of timer.
date & time for this timer must have this format:
2015-11-09T23:10:09
How do I add one minute to the timer without Refresh the page?

Remove existing code side of div code

Goal:
If there are any html syntax code or data inside of
<div id="feedEntries"></div>
Then everything should be removed and be contained empty only.
Problem:
What syntax do I need in order to remove every code and data inside of
<div id="feedEntries"></div>
Please remember that i don't want to add any class or id inside of "feedEntries"
<h3>Search</h3>
<div class="content">
<form>
<input type="text" width="15" value="searchword" id="searchTermTextField"><input type="button" name="some_name" value="Sök" id="searchButton">
</form>
<div id="feedEntries">
</div>
</div>
function fetchSearchResults(json) {
var feedEntriesDivElement = document.getElementById('feedEntries');
var ulElement = document.createElement('ul');
if (feedEntriesDivElement.children.length >= 0)
{
// Syntax code to remove the code/data
}
for (var i = 0; i < json.responseData.results.length; i++)
{
var liElement = document.createElement('li');
var personText = document.createTextNode(json.responseData.results[i].titleNoFormatting);
var newlink = document.createElement('a');
newlink.setAttribute('href', json.responseData.results[i].url );
newlink.appendChild(personText);
liElement.appendChild(newlink);
ulElement.appendChild(liElement);
}
feedEntriesDivElement.appendChild(ulElement);
}
Using pure DOM and Javascript (sometimes considered better than altering innerHTML):
if ( feedEntriesDivElement.hasChildNodes() )
{
while ( feedEntriesDivElement.childNodes.length >= 1 )
{
feedEntriesDivElement.removeChild( feedEntriesDivElement.firstChild );
}
}
feedEntriesDivElement.innerHTML = ''; should do the trick.
you can use jquery like this $('#feedEntries').empty()
to remove from javascript please check the post
document.getElementByIf('feedEntries').innerHTML = ''

Categories