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!
Related
I have some code working to make 2 div tags visible only when another div is clicked (an attempt to make a custom title bar)The 2 divs are invisible initially.
const {remote} = require('electron');
var win = remote.getCurrentWindow();
win.setSize(810,610);
function max(){
var win = remote.getCurrentWindow();
if(win.isMaximized()){
win.unmaximize();
document.getElementById('file').style.right = "744px";
document.getElementById('about_us').style.right = "664px";
}else{
win.maximize();
document.getElementById('file').style.right = "1314px";
document.getElementById('about_us').style.right = "1234px";
}
}
hidden = true;
function get(el){
return document.getElementById(el);
}
function open_file_menu(){
var fileMenu = [get('file_menu'),get('file_menu2')];
if (hidden == false){
for (i = 0;i<fileMenu.length;i++){
fileMenu[i].style.visibility = 'hidden';
hidden = true;
}
}
else{
for (i = 0;i<fileMenu.length;i++){
fileMenu[i].style.visibility = 'visible';
hidden = false;
}
}
}
body,html{
width: 47.5pc;
height: 100pc;
overflow: hidden;
-webkit-app-region:drag;
z-index: 0;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: monospace;
z-index: 1;
}
#container{
width: 100pc;
height: 100pc;
display: block;
position: absolute;
right: 40px;
top: 0;
}
#container nav{
display: grid;
width: 100pc;
height: 2.2pc;
background-color: #333333;
z-index: 1;
}
span{
position: absolute;
top:0;
transform: translateX(100px);
color:#dacbcb;
font-size: 1.5em;
font-weight:bold;
background-color: #222222;
padding-left: 25px;
padding-right: 25px;
padding-top: 7px;
padding-bottom: 6px;
transition: ease-in-out 1ms;
-webkit-app-region:no-drag;
}
#buttons{
position: absolute;
right: 120px;
}
#maximize{
transform: translateX(-124px);
}
#maximize span:hover,#minimize:hover span,.menu1:hover,.menu2:hover{
background-color: #333333;
}
#file{
position: absolute;
right:743px;
}
#about_us{
position: absolute;
right:663px;
#run{
transform: translateY(100px);
}
.menu1{
font-size: 1.1em;
padding-left: 25px;
padding-right: 25px;
padding-top: 10px;
padding-bottom: 8px;
}
.menu2{
font-size: 1.1em;
padding-left: 25px;
padding-right: 25px;
padding-top: 10px;
padding-bottom: 8px;
}
#file_menu{
visibility: hidden;
background-color: #222222;
transform: translateY(34px);
font-size: 1.1em;
}
#file_menu2{
visibility: hidden;
background-color: #222222;
transform: translateY(63px);
font-size: 1.1em;
padding-left: 25px;
padding-right: 17px;
padding-top: 7px;
padding-bottom: 6px;
}
.fm{
z-index: 2;
}
#file_menu:hover,#file_menu2:hover{
background-color: #333333;
}
<!DOCTYPE html>
<html>
<head>
<script src="init.js"></script>
<script src="text_editor.js"></script>
<meta charset="UTF-8">
<title>Extorc App</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div onclick="uff()">
<span id = "file_menu" class = "fm">new</span>
</div>
<div>
<span id = "file_menu2" class = "fm">open</span>
</div>
<div id="container">
<nav>
<div id="buttons">
<div id="file" onclick="open_file_menu()">
<span class = "menu1">file</span>
</div>
<div id="about_us">
<span class = "menu2">about..us</span>
</div>
<div id="maximize" onclick="max()">
<span>+</span>
</div>
</div>
</nav>
</div>
</body>
</html>
The code works ... the menu opens up with 2 divs displaying but the divs are un clickable or probably totally passive (i have set a :hover background color in my css)Though , this problem ends if i open the 2 divs and then maximize the window..then they become interactable and then after minimizing also they work which means the divs are un-interactable initially but then after one maximize , they work...any fix for that....should i not use visibility here?
Edit Not only by fullscreen but also if i resize the window , the buttons start working , and starting the window as fullscreen : true, doesnt make it work
You cannot put all the body as draggable: -webkit-app-region:drag; on body,html
You will have to define a specific area where it defined as draggable.
My recommendation define a specific area / SVG that means drag and don't put clickables on it.
E.g take a look at known electron products (VSCODE, Slack) you have specific regions from which you can drag from.
Hope I have helped.
I have a custom switch in CSS that I am using in a template for django. I am loading the javascript file properly but when I go to use the switch I don't get the expected result. The expected result is that the background would change colour this does not work using the switch. I added a button into the template to see if the button would work which it did,
javascript file:
function darkModen() {
var element = document.body;
element.classList.toggle("dark-mode");
}
HTML switch this does nothing:
<div class="onoffswitch" style="position: fixed;left: 90%;top: 4%;" onclick="darkMode()">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" onclick="darkMode">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
HTML button that does do what is expected.
<button onclick="darkMode()">Toggle dark mode</button>
CCS if this is causing the problem:
.onoffswitch {
position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #000000; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 16px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 5px;
background-color: #FAFAFA; color: #A87DFF;
darkMode()
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 5px;
background-color: #FAFAFA; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 6px;
background: #2E2E2E;
position: absolute; top: 0; bottom: 0;
right: 56px;
border: 2px solid #000000; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
background-color: #27A1CA;
}
body {
color: black;
}
.dark-mode {
background-color: rgb(66, 66, 66);
color: white;
}
I have been trying to understand how the button works and the switch doesn't. Does this happen because I cant use onclick inside a div tag? I am also wondering if django could cause this if there is special way to use javascript in django. I can see that the javascript file as been loaded prpperly into the site as I can get to: http://127.0.0.1:8000/static/lighting.js and see the script here.
I suggest you create an event handler for the checkbox and listen for the change event to determine whether it is checked or not to make sure that you are properly applying the dark-mode class to the body tag.
Here's a possible solution:
var body = document.body;
var checkbox = document.querySelector("#onoffswitch");
checkbox.addEventListener("change", function(event) {
var target = event.target;
var isChecked = target.checked;
if (isChecked) {
body.classList.add("dark-mode");
} else {
body.classList.remove("dark-mode");
}
});
.dark-mode {
background-color: grey;
color: white;
}
<div>
<label for="onoffswitch">
<span>Toggle dark mode on or off.</span>
</label>
<input type="checkbox" name="onoffswitch" id="onoffswitch" />
</div>
Also, the onclick event on the div element is probably not what you want, at least in your situation since you're using a checkbox to determine whether the dark-mode should be applied or not.
However, the onclick attribute on the input element that you have is missing the parenthesis (onclick="darkMode()"), so if you really want to go that route, you could still do it, but I'd recommend just dealing with the checkbox itself and checking if it's checked or not.
function toggleDarkMode() {
document.body.classList.toggle("dark-mode");
}
.dark-mode {
background-color: grey;
color: white;
}
<div>
<label for="onoffswitch">
<span>Toggle dark mode on or off.</span>
</label>
<input
type="checkbox"
name="onoffswitch"
id="onoffswitch"
onclick="toggleDarkMode()"
/>
</div>
Please check onclick function name your calling onclick="darkmode()" but in javascript you write
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
please change myFunction with darkmode
it will be look like
function darkmode() {
var element = document.body;
element.classList.toggle("dark-mode");
}
Hopefully now it work
I wanted to do a single button which every single one of its clicks would show the same word but with different sizes, fonts, weights, etc.
Like, for example: I have the word "become", written normally with Helvetica font and a button bellow it. When I click the button, the word should change to "become" but in uppercase and bold. Then, I would click it again, and it would change to the word "become" but in lowercase and with a line through it, and so on...
In my HTML I have:
<div id="container2">
<h4 id="original">Become</h4>
</div>
<h2 id="button">Transform me!</h2>
In my CSS I have:
#font-face {
font-family: Helvetica;
src: url(Helvetica CE Regular.ttf);
}
h4{
font-family: helvetica;
margin:0 auto;
text-align:center;
width:350px;
margin-top: 7%;
}
#button{
font-family: helvetica;
font-size: 25px;
background-color: inherit;
width: 165px;
margin: 0 auto;
margin-top: 3.5%;
padding: 0.5%;
position: static;
}
#button:hover {
text-decoration: underline;
}
#original{
font-size: 90px;
font-weight: bold;
text-transform: uppercase;
}
In my Javescript I have this for now:
var botao
var original = document.getElementById('original');
botao = document.getElementById("button");
botao.onclick = function () {
original.style.cssText = 'font-style:oblique'; 'text-transform: lowercase';
}
I'm having trouble finding online an answer to solve this... I'm also not very confortable with java, for now at least...
If someone could help me out I would be very grateful.
Thank you in advance.
Here is a working version of suggestion above.
Added font size change added, works fine.
const classes = ["class1", "class2", "class3"];
var selectedIndex = 0;
document.getElementById("button").addEventListener("click", function(){
if(++selectedIndex >= classes.length) selectedIndex = 0;
document.getElementById("original").className = classes[selectedIndex];
});
.class1 {
color: red;
font-size: 1.25em;
}
.class2 {
color: blue;
font-size: 1.75em;
}
.class {
color: green;
font-size: 2.5em;
}
<div id="container2">
<h4 id="original" clasx="class1">Become</h4>
</div>
<h2 id="button">Transform me!</h2>
I would recommend using jQuery for doing this. It is friendlier to beginners.
You just need to include the jQuery CDN link in your page, and then you can use jQuery ($) functions. Using classes makes sense. See the code.
$('.transformer').click(function(){
if ($(this).siblings('h4').hasClass('original')) {
$(this).siblings('h4').addClass('uppercase-bold');
$(this).siblings('h4').removeClass('original');
}
else if($(this).siblings('h4').hasClass('uppercase-bold')){
$(this).siblings('h4').addClass('italic');
$(this).siblings('h4').removeClass('uppercase-bold');
}
else if($(this).siblings('h4').hasClass('italic')){
$(this).siblings('h4').addClass('original');
$(this).siblings('h4').removeClass('italic');
}
});
.wrapper {
border: 1px solid blue;
padding: 10px;
margin-bottom: 10px;
}
h4 {
text-transform: lowercase;
}
.uppercase-bold {
text-transform: uppercase;
font-weight: bold;
color: blue;
}
.italic {
font-style: italic;
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<h4 class="original">Become</h4>
<button class="transformer">transform me!</button>
</div>
<div class="wrapper">
<h4 class="original">To be, or not to be?</h4>
<button class="transformer">transform me!</button>
</div>
im trying to make a average grade calculator, now thats is going fine but now i want to calculate the average immediately when a number gets inputted in one of the fields. I've been trying this with "on(), live(), onkeyup()" but can't get it to work.
The result of the average now displays beneath the inputfields 'onclick' on the button. I want the average displayed there but then as soon as you input numbers in one of the fields it should show there as it now does after the onclick.
What i've tryed with the 'on(), live(), onkeyup()' is to connect them to the input fields and connect them to the calculator() function.
Is there a easy way to do this or a other certain way?
greetings.
function calculator() {
var weight = 0;
var mark = 0;
var weights = document.querySelectorAll('[id^=weight-]');
var grades = document.querySelectorAll('[id^=mark-]');
var trs = document.getElementsByTagName('tr');
var tBody = document.getElementsByTagName('tbody')[0];
var totalWeight = 0;
var totalGrade = 0;
for (var i = 0; i < weights.length; i++) {
totalWeight += +weights[i].value;
}
for (var i = 0; i < grades.length; i++) {
totalGrade += +grades[i].value;
}
var finalGrade=totalGrade/totalWeight;
var display = document.getElementById('output-div');
var newTr = document.createElement('TR');
newTr.innerHTML = `<td><input id="weight-${trs.length + 1}" type="text" size=2 value=""></td><td><input id="mark-${trs.length + 1}" type="text" size=2 value=""></td>`;
tBody.appendChild(newTr);
display.innerHTML='Je gemiddelde is: ' +finalGrade.toFixed(2);
}
html {
background-color: ;
}
header {
background-color: ;
}
h2 {
text-align: center;
}
h3 {
text-align: center;
}
body {
font-family: 'Roboto', sans-serif;
}
table {
margin: auto;
}
tr {
background-color: ;
}
td {
background-color: ;
}
#table-title {
font-size: 20px;
font-style: italic;
text-align: center;
position: relative;
}
input {
text-align: center;
}
[id^="mark"] {
width: 100px;
}
[id^="weight"] {
width: 100px;
}
#calc-btn-div {
position: relative;
width: 150px;
margin: auto;
}
#calc-btn {
position: relative;
padding: 5px;
margin-top: 20px;
}
#calc-btn:hover {
border-color: black;
box-shadow: 8px 8px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
/* #add-input-div {
height: 50px;
text-align: center;
width: 300px;
margin: auto;
margin-top: 20px;
}
#add-input-btn {
position: relative;
padding: 5px;
margin-top: 20px;
}
#add-input-btn:hover {
border-color: black;
box-shadow: 8px 8px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
} */
#output-div {
background-color: ;
height: 50px;
text-align: center;
width: 300px;
margin: auto;
margin-top: 20px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<header>
<h2>Gemiddelde cijfer</h2>
<h3>Voer hieronder je cijfers in</h3>
</header>
<body>
<table id="table">
<tr id="table-title">
<td>Weging</td>
<td>Cijfer</td>
</tr>
<tr>
<td><input id="weight-1" type="text" size=2 value=""></td>
<td><input id="mark-1" type="text" size=2 value=""></td>
</tr>
</table>
<div id="calc-btn-div">
<input id="calc-btn" type="button" value="Berekenen je gemiddelde" onclick="calculator()">
</div>
<!-- <div id="add-input-div">
<input id="add-input-btn" type="button" value="Voeg cijfer toe" onclick="addInput()">
</div> -->
<div id="output-div"></div>
</body>
</html>
Using vanilla JavaScript I would attach an eventListener to the inputfields like this
document.getElementById('weight-1').addEventListener('change',function(){
calculator();
});
document.getElementById('mark-1').addEventListener('change',function(){
calculator();
});
These addEventListener functions adds listeners to the "input" field's predefined 'change'-events, and fires the calculator(); function from your code.
Seeing that you are using some sort of dynamic generation of the inputfields, you could add the listeners to your inputfields using the same querySelector that you use to target them during calculation. It would mean replacing getElementById('weight-1') in my example above with querySelectorAll('[id^=weight-]') for the weight-fields.
Also, doing work with values, IO, and calculation between html and JavaScript, I would suggest using a library like jQuery. jQuery simplifies these processes a lot.
This is the documentation for the jQuery alternative onClick function:
https://api.jquery.com/change/
I think you could do that with an angularJS module. Take a look at this tutorial : https://www.w3schools.com/angular/angular_modules.asp
maybe it will help.
I created a button using div tag. It is not actually a button but it is look like a button. Here I want to change the content of h3 tag to '>' this symbol when mouse is hover on it. How to do it?
I write code in javascript to change h3 contents but it will not show any effect? I don't know why?
function change-content() {
document.getElementById('button-name').innerHTML = ">";
}
body {
background-color: #6badf6;
}
#button-layout {
background-color: #3b81cf;
width: 100px;
height: 40px;
border-radius: 10px;
margin-left: 50%;
margin-top: 25%;
}
#button-name {
font-family: verdana;
font-size: 14px;
color: white;
padding-left: 22px;
padding-top: 11px;
}
#button-name:hover {
cursor: pointer;
}
<html>
<body>
<div id="button-layout">
<h3 id="button-name" onmouseover="change-content()">Submit</h3>
</div>
</body>
</html>
You can actually do this using pure CSS, no JS required, by adding attributes to the button containing the text you want for both the normal and hover states, and then setting the content of the :after pseudo to show this depending on :hover.
This also maintains clear separation of concerns, keeping content within your HTML and outside of your JS, meaning should you wish to change the value being displayed, you can simply reference the source markup directly.
body {
background-color: #6badf6;
}
#button-layout {
background-color: #3b81cf;
width: 100px;
height: 40px;
border-radius: 10px;
margin-left: 50%;
margin-top: 25%;
}
#button-name {
font-family: verdana;
text-align: center;
font-size: 14px;
color: white;
padding-top: 11px;
}
#button-name:hover {
cursor: pointer;
}
#button-name:after {
content: attr(data-label);
}
#button-name:hover:after {
content: attr(data-label-hover);
}
<div id="button-layout">
<h3 id="button-name" data-label="Submit" data-label-hover=">"></h3>
</div>
Concerning why your code currently isnt working, this has also been answered in this thread, namely, your function name contains the invalid - character.
Issue is in function declaration. define function with (_) like function change_content() it will work
Your function name is invalid. The parser see that as a subtraction.
<html>
<head>
<style>
body {
background-color: #6badf6;
}
#button-layout {
background-color: #3b81cf;
width: 100px;
height: 40px;
border-radius: 10px;
margin-left: 50%;
margin-top: 25%;
}
#button-name {
font-family: verdana;
font-size: 14px;
color: white;
padding-left: 22px;
padding-top: 11px;
}
#button-name:hover {
cursor: pointer;
}
</style>
<script>
function changeContent() {
document.getElementById('button-name').innerHTML = ">";
}
</script>
</head>
<body>
<div id="button-layout">
<h3 id="button-name" onmouseover="changeContent()">Submit</h3>
</div>
</body>
</html>
change your function name see example
changecontent()