Develop Reference

HTML onclick event doesn't work with parameter

When I click my button, which should make things visible and invisible, the whole website disappears.
What I was trying to do is to make a div with some text and probably some images and let it disappear and appear, when the button gets hit. So it would look like the Information box lists more information’s, when the user wants to read them.
But I would like to get a solution, witch I can use for more boxes like this one, so I can only copy the html and switch the onclick parameter and id from the div to 2, 3 ...
function open(x) {
var more_info = document.getElementById("project_info_" + x);
if (more_info.style.display == "none") {
more_info.style.display = "unset";
} else {
more_info.style.display = "none";
}
}
.project-box {
padding: 2vh;
margin-bottom: 3vh;
box-shadow: 0px 5px 7px rgb(136, 136, 136);
}
.project-button {
width: 20vw;
height: 3vh;
background-color: #d6d6d6;
border: none;
}
.project-button:hover {
background-color: #B50000;
color: white;
}
.project-button:focus,
.project-button:active,
.project-button:visited {
border: none;
border-radius: 0;
}
.project-closed {
display: none;
}
* {
font-family: Arial, Helvetica, sans-serif;
font-size: 2vh;
}
<div class="project-box" id="project_1">
<h3>Project 1</h3>
<p>description</p>
<div class="project-closed" id="project_info_1">
<p>Informations</p>
</div>
<button class="project-button" onclick="open(1)">More details</button>
</div>

The problem is that you have called the function open which is getting you caught up in this problem.
Because of the (horrible, horrible) way intrinsic event attributes work you are calling document.open instead of your self-defined global open function.
document.open wipes out the entire document ready for document.write to write a new one.
The quick fix is to call your function something else.
The better solution is to switch to addEventListener.

Your problem is using open - although not a reserved word - in the onclick which performs a document.open (I would have guessed window.open) and that will wipe the page in any case
Rename the function but I strongly recommend you remove the inline event handler and use an eventListener
I added the IDs of the divs to show as data attribute to the buttons you click
document.addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("project-button")) {
const more_info = document.getElementById(tgt.dataset.id);
more_info.classList.toggle("project-closed");
}
})
.project-box {
padding: 2vh;
margin-bottom: 3vh;
box-shadow: 0px 5px 7px rgb(136, 136, 136);
}
.project-button {
width: 20vw;
height: 3vh;
background-color: #d6d6d6;
border: none;
}
.project-button:hover {
background-color: #B50000;
color: white;
}
.project-button:focus,
.project-button:active,
.project-button:visited {
border: none;
border-radius: 0;
}
.project-closed {
display: none;
}
* {
font-family: Arial, Helvetica, sans-serif;
font-size: 2vh;
}
<div class="project-box" id="project_1">
<h3>Project 1</h3>
<p>description</p>
<div class="project-closed" id="project_info_1">
<p>Informations</p>
</div>
<button type="button" class="project-button" data-id="project_info_1">More details</button>
</div>
<div class="project-box" id="project_2">
<h3>Project 2</h3>
<p>description</p>
<div class="project-closed" id="project_info_2">
<p>Informations</p>
</div>
<button type="button" class="project-button" data-id="project_info_2">More details</button>
</div>

Change event fired twice on changing radio group manually with jQuery

When selecting "A&L" in the select, the radio group is hidden and its value is set to "n".
I try to trigger the change event so that the "Hello"-div disappears too, but it doesn't work correctly - on debugging I noticed that the change event is executed twice - the first time correctly and then again with the value "j".
What's my mistake?
Here's the full code: https://jsfiddle.net/95Lxroqy/
After I looked through some other questions it seemed to me that .val(['n']).change(); (line 24) should have worked -
but it seems like I'm still missing something.
// find elements
var banner = $("#banner-message");
var button = $("#place");
var langs = $("#langs");
var trans = $("#trans");
var radioGroup = $("input[type=radio][name=translate]");
var div = $("#dynamic");
radioGroup.change(function() {
if (this.value === 'n') {
div.hide();
}
else if (this.value === 'j') {
div.show();
}
});
// handle click and add class
button.change(function(event){
var al = button.val() === "al";
if(al){
langs.show();
trans.hide();
radioGroup.val(['n']).change();
}else{
trans.show();
langs.hide();
}
}).change();
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
<select id="place">
<option value="in">Internal</option>
<option value="al">A&L</option>
</select>
<select id="langs">
<option value="volvo">German</option>
<option value="saab">English</option>
</select>
<fieldset id="trans">
<input type="radio" id="n" name="translate" value="n">
<label for="n"> Nein</label>
<input type="radio" id="j" name="translate" value="j">
<label for="j"> Ja</label>
</fieldset>
<div id="dynamic">
Hello
</div>
</div>

val() get/set the value of the element. Your code matches all the options exist in the collection variable, it does not match the specific element you are looking for. You can target the parent element from which you can find the the specific element by using attribute selector.
Try
radioGroup.parent().find('[value=n]').change();
Update: The more feasible solution is using the filter()
radioGroup.filter('[value=n]').change();

Reapplying style attributes after dynamically appending elements

On my page, if I change the attributes of an element such as
<div class="showInitially"></div>
by setting
$(".showInitially").hide()
then any elements added dynamically afterwards like
container.append("<div class='showInitially'>text</div>");
do not inherit the changes.
I know I can re-apply all the changes after I add another element but somehow this seems inefficient and hacky, especially if there are a number of changes to styles made. So, is there another way to add elements to the page that will automatically have the inherited style and attribute changes applied to them?
I've tried
container.trigger("create");
but this does nothing. An example is shown in the snippet below:
var container=$("#container");
var buttons = $("button")
var allDivs = $("#container .showInitially")
buttons.on("click", function(){
buttons.addClass("alt");
allDivs.addClass("alt");
allDivs.hide();
addButton();
})
function addButton(){
container.append("<div><button>Change another color</button></div> <div class='showInitially'>text</div>");
}
body {
background: #cccccc;
padding: 20px;
font-family: Helvetica;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
div{
color:black;
}
.alt{
background: red;
}
.showInitially{
color:orange;
display:inline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" >
<button>Change color</button> <div class="showInitially">text</div>
</div>

Modify the CSS rule dynamically.
Blatantly ripped off from How do you read CSS rule values with JavaScript? and modify a css rule object with javascript and then cobbled together.
Part of the issue with your code was that your on click only attached the click handler to buttons that already existed. Any new button would not get a click handler, so I moved the handler to the document and added a selector.
var container=$("#container");
var buttons = $("button")
var allDivs = $("#container .showInitially")
$(document).on("click", "button", function(){
buttons.addClass("alt");
allDivs.addClass("alt");
modStyle('.showInitially', 'display', 'none');
//allDivs.hide();
addButton();
})
function addButton(){
container.append("<div><button>Change another color</button></div> <div class='showInitially'>text</div>");
}
function modStyle(className, foo, bar) {
var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
for (var x = 0; x < classes.length; x++) {
if (classes[x].selectorText == className) {
(classes[x].cssText) ? classes[x].style[foo] = bar : classes[x].style[foo] = bar;
}
}
}
body {
background: #cccccc;
padding: 20px;
font-family: Helvetica;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
div{
color:black;
}
.alt{
background: red;
}
.showInitially{
color:orange;
display:inline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" >
<button>Change color</button> <div class="showInitially">text</div>
</div>

How to open a dialog box on click of a dynamic cell value using jquery

I have an HTML table:
<tbody>
<tr>
<td> <ul id="element"></td>
</tr>
</tbody>
The values in the table are passed from the database using jquery:
element += '<li>' + valueOfElement.ELEMENTNAME + '</li>'
I want to show some information related to the element name in a dialog box when user clicks the element name. I am new to JavaScript so I don't know how to make a dynamic value clickable and how to open a dialog box on click of the element.

You can add an anchor tag around your element.
element += "<li><a href='javascript:void(0)' onclick='myDialogFunction()'>" + valueOfElement.ELEMENTNAME + "</a></li>";
To answer your styling question, just add this CSS rule to affect all anchor tags
a {
text-decoration: none;
color: #000;
}
or you can assign your links a class
<html>
<a class='mystyledlink' />
</html>
<style>
.mystyledlink {
text-decoration: none;
color: #000;
}
</style>

Using jquery you can bind a click event to the elements that will show the dialog box. Without seeing your dialog box or what all that entails I can't really include it but you could do something like this.
$('tbody').on('click','li',function(){
var value = $(this).text();
//do something with value and show dialog box
})

This approach is in vanilla JavaScript. You could try something like this: Make use of addEventListener to listen for click events on all your clickable cells. You could make use of document.querySelectorAll like I did to access all cells.
var tdGroup = document.querySelectorAll( 'td' ),
i;
for( i = 0; i < tdGroup.length; i++ ){
tdGroup[ i ].addEventListener( 'click', messages )
}
function messages(){
alert( 'you clicked' + this.textContent );
}
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
}
html {
font-family: sans-serif;
overflow: hidden;
}
body {
display: flex;
}
table {
margin: auto;
border-collapse: collapse;
position: relative;
top: 2rem;
}
th {
text-transform: uppercase;
}
th,
td {
padding: 1rem;
border: 1px #000 solid;
text-align: center;
transition-property: background;
transition-duration: 1s;
}
td:hover {
cursor: pointer;
background-color: #eee;
color: #333;
}
td:active {
background-color: #ddd;
color: #444;
transition-duration: 0.25s;
}
p {
width: 100%;
padding: 1rem;
text-align: center;
background-color: #000;
color: #eee;
position: absolute;
top: 0;
left: 0;
}
<p>Click a secondary item of the table for more information</p>
<table>
<tr>
<th>
Technology Field
</th>
<th>
Language
</th>
<th>
Resources
</th>
<th>
Related technologies
</th>
</tr>
<tr>
<td id="front-end">
Front End
</td>
<td id="javaScript">
JavaScript
</td>
<td id="stack">
StackOverflow
</td>
<td id="hcs">
HTML, CSS, SASS
</td>
</tr>
</table>

jQuery UI effect "shake" makes div disappear

I have this div ( that contains the content of my website. I would like to make it shake when something doesn't authenticate properly using the jQuery effect.("shake"). However, I can't get it to shake at all. Instead, the div disappears for a period of time and then reappears. This happens regardless of me switching any of the parameters. The only effect that switching the parameter has is changing the duration of the disappearance.
I haven't been able to troubleshoot much (this is literally my first use of jQuery and the only jQuery I anticipate this project utilizing).
The reason the google apps script tag was added (I added it back) is because this project is using Google Apps Script. I'm using it to pull data from a Google Spreadsheet (which avoids paying for and maintaining a database).
The offending jQuery (is currently in the HTML file):
$(document).click(function(){
$("#container").effect( "shake", {times:4}, 1000 );
});
And here's ALL of the code:
function getTournamentInfo(){
google.script.run.withSuccessHandler(setTournamentInfo).grabTournamentInfo()
}
function setTournamentInfo(systemData){
// insert tournament header
var tournamentBanner = document.createElement("h1");
var tournamentBannerText = document.createTextNode(systemData[0]);
tournamentBanner.appendChild(tournamentBannerText);
document.getElementById("container").insertBefore(tournamentBanner,document.getElementById("maindata"));
//create a space
document.getElementById("container").insertBefore(document.createElement("br"),document.getElementById("maindata"));
//insert chamber header
var chamberBanner = document.createElement("h2");
var chamberBannerText = document.createTextNode(systemData[1]);
chamberBanner.appendChild(chamberBannerText);
document.getElementById("container").insertBefore(chamberBanner,document.getElementById("maindata"));
//insert session header
var sessionNumber = document.getElementById("sessionNameNumber");
var sessionNumberText = document.createTextNode(systemData[2]);
sessionNumber.appendChild(sessionNumberText);
}
var ids = [];
var names = [];
var school = [];
function getData(){
google.script.run.withSuccessHandler(setIdData).grabDebaters();
}
function setIdData(systemData){
for (var i=0; i<systemData[0].length-1; i++)
{
ids.push(systemData[0][i]);
names.push(systemData[1][i]);
school.push(systemData[2][i]);
console.log(names[3]);
}
makeRows();
}
function makeClassroom()
{
}
function makeRows() {
for (var i=0; i<ids.length-1; i++)
{
generateDebaters();
}
}
var nameSchoolCounter = 0; // this is used to ensure that all the names are iterated through
function generateDebaters() {
var mainTable = document.getElementById("maindata");
var debaterRow = mainTable.insertRow(-1);
debaterRow.setAttribute("onmouseover","darkenRow(this)");
debaterRow.setAttribute("onmouseout","lightenRow(this)");
var nameCell = debaterRow.insertCell(0);
nameCell.innerHTML = names[nameSchoolCounter];
nameCell.setAttribute("id","debater");
var schoolCell = debaterRow.insertCell(1);
schoolCell.innerHTML = school[nameSchoolCounter];
schoolCell.setAttribute("id","debater");
nameSchoolCounter++;
var speech1Cell = debaterRow.insertCell(2);
speech1Cell.innerHTML = '<input name="Speech 1" placeholder="Enter 1-6">'
var speech2Cell = debaterRow.insertCell(3);
speech2Cell.innerHTML = '<input name="Speech 2" placeholder="Enter 1-6">'
var speech3Cell = debaterRow.insertCell(4);
speech3Cell.innerHTML = '<input name="Speech 3" placeholder="Enter 1-6">'
var ethosCell = debaterRow.insertCell(5);
ethosCell.innerHTML = '<input name="Ethos" placeholder="Enter 1-3">'
var nomCell = debaterRow.insertCell(6);
nomCell.innerHTML = '<input type="checkbox" id="nomBox" name="nom"/>'
}
function darkenRow(row) {
row.style.backgroundColor = "rgba(0,0,0,.6)";
}
function lightenRow(row) {
row.style.backgroundColor = "rgba(0,0,0,0)";
}
function submitProceduresGraphics(){ // this does all the graphical procedures for submitting
// this prevents the divs width and height from disappearing (it's set as display: table in the stylesheet)
var container = document.getElementById("container");
var containerStyle = getComputedStyle(container);
container.style.width = containerStyle.width;
container.style.height = containerStyle.height;
while (container.firstChild) {
container.removeChild(container.firstChild);
}
return submitProcedures();
}
function submitProcedures(){
//incomplete method
return students;
}
//below is what actually runs
getData();
getTournamentInfo();
h1{
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 36px;
color: white;
margin-bottom: 0px;
}
h2{
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 20px;
color: white;
margin-top: 0px;
}
#maindata{
border-collapse: collapse;
border: 0px;
width: 70%;
margin-top: 40px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 18px;
color: white;
white-space: nowrap;
}
#maindata td{
margin-left:0px;
margin-right: 0px;
padding: 4px;
border: 0px;
border-image-width: 0px;
}
#maindata td#debater{
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 14px;
}
body{
background: url(https://d3591ee267da5305673fdd35d46a7c93a6509bd1.googledrive.com/host/0B3UFP8Xs5x7WUldKaFZJTjhkbWM);
}
#container {
background-color: rgba(0,0,0,.5);
padding-left: 40px;
padding-right: 40px;
display: table;
margin: auto;
border-radius: 6px;
position: relative;
top: 100%;
transform: translateY(20%);
}
input {
background-color: none;
}
#nomBox {
margin-top: 2.5px;
margin-bottom: 2.5px;
width: 18px;
height:18px;
}
#sessionName {
float: right;
margin-top: 26.2px;
text-align: center;
font-family: 'Lato', sans-serif;
color: white;
font-weight: 700;
font-size: 18px
}
#sessionNameNumber{
color: white;
font-family: 'Lato', sans-serif;
margin-top: 0px;
font-size:66px;
font-weight: 700;
margin-bottom: 4px;
}
/* below here is the CSS for the submit button */
.button {
border: 0 none;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
cursor: pointer;
font-family: Lato,sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;;
margin-top: 40px;
padding: 7px 10px;
text-transform: none;
transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
width: 10%;
/* auto */
text-align: center;
/* DELETE WHEN WIDTH AUTO */
}
.button.green {
background: none repeat scroll 0 0 #46b98a;
color: #FFFFFF;
}
.button.green:hover {
background: none repeat scroll 0 0 #444444;
color: #FFFFFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Use a templated HTML printing scriptlet to import common stylesheet. -->
<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'> <!-- This has a font called Lato because TNR was hurting my eyes. Btw Google Fonts is awesome !-->
<title>autoTab</title>
</head>
<body>
<div id="container">
<div id=sessionName>SESSION<br><p id="sessionNameNumber"></p></div>
<!-- Right now, this is brining up an unattractive page when submitted. We should get rid of that: https://mashe.hawksey.info/2014/07/google-sheets-as-a-database-insert-with-apps-script-using-postget-methods-with-ajax-example/ !-->
<table id="maindata">
<tbody>
<tr>
<td>
Debater Name
</td>
<td>
School
</td>
<td>
<!-- Noice-->
Speech 1
</td>
<td>
Speech 2
</td>
<td>
Speech 3
</td>
<td>
Ethos
</td>
<td>
Nom?
</td>
</tr>
</tbody>
</table>
<div class='button green center' onclick="submitProceduresGraphics()">Submit Scores</div>
<p>
</body>
</html>
<!-- Store data passed to template here, so it is available to the
imported JavaScript. -->
<script>
$( document ).click(function() {
$( "#hello" ).effect( "bounce", "slow" );
});
</script>
<?!= HtmlService.createHtmlOutputFromFile('JavaScript').getContent(); ?>
<!-- Use a templated HTML printing scriptlet to import JavaScript. -->

top: 100% applied to #container is causing your problems. Removing the style doesn't seem to have any effects, so I removed it.
Explanation: When jQuery UI creates the shake effect, it first wraps your element in a div.ui-effects-wrapper, which is a relatively positioned element and copies any position styling (such as top) from your element. It then places your element, stripped of its original position styling, inside of this div, and animates a shake by adjusting its left CSS property. In your case, you had top: 100% applied to your container. When jQuery placed your element inside of its effect-wrapper, the wrapper had both position: relative and top: 100%, which placed your element, the container, off the bottom edge of the screen, out of view. Play around with setting your container styling to something like top: 20px and see the effect this has.
Hope I helped!