|
Hola, soy nueva en el mundo del desarrollo web y me propuse hacer un formulario con html, css y js. Al hacer esta última tuve unos inconvenientes y no sé como solucionarlos. Cuando termino de colocar las contraseñas en mi formulario sale un error que dice lo siguiente "Uncaught TypeError: Cannot read properties of null (reading 'classList')
at HTMLInputElement.validarFormulario (intro.js:18:72)" y también "Uncaught ReferenceError: inputPassword1 is not defined at validarContrasena2 (intro.js:30:1) at HTMLInputElement.validarFormulario"
Aquí le adjunto el codigo para que me ayuden:
HTML:
<!DOCTYPE html>
<html>
<head>
<title> Formulario </title>
<link rel="stylesheet" href="Diseno.css">
</head>
<body>
<center><h1>Formulario de datos</h1></center>
<form action="" name="formulario" method="get" id="formulario">
<div class="formulario_grupo" id="grupo_nombres">
<label for="nombres"> Nombres: </label>
<div class="formulario_grupo-imput">
<input type="text" name="nombres" id="nombres" placeholder="Escribe tus nombres">
<p class="formulario_input-error">Puede tener un maximo de 30 caracteres.</p>
</div>
<br>
<div class="formulario_grupo" id="grupo_apellidos">
<label for="apellidos"> Apellidos: </label>
<input type="text" name="apellidos" id="apellidos" placeholder="Escribe tus apellidos" >
<p class="formulario_input-error">Puede tener un maximo de 30 caracteres.</p>
</div>
<br>
<div class="formulario_grupo" id="grupo_telefono">
<label for="telefono"> Numero telefonico: </label>
<input type="tel" name="telefono" id="telefono" placeholder="Escribe numero telefonico" >
</div>
<p class="formulario_input-error">Solo se aceptan números.</p>
<br>
<label for="CI">C.I:</label>
<input type="radio" name="iden" id="CI" value="CI">
<br>
<label for="RIF"> RIF:</label>
<input type="radio" name="iden" id="RIF" value="RIF">
<div class="formulario_grupo" id="grupo_identidad">
<label for="identidad"> Ingrese Cedula o RIF:</label>
<input type="text" name="identidad" id="identidad" placeholder="Número de CI o RIF" >
</div>
<p class="formulario_input-error">debe de tener un maximo de 11 caracteres.</p>
<br>
<label for="nacimiento"> Fecha de nacimiento:</label>
<input type="date" name="nacimiento" id="nacimiento" >
<br>
<div class="formulario_grupo" id="grupo_correo">
<label for="correo"> Correo electonico: </label>
<input type="email" name="correo" id="correo" placeholder="Escribe tu E-mail" >
</div>
<p class="formulario_input-error">El correo debe tener dominio.</p>
<br>
<div class="formulario_grupo" id="grupo_contrasena">
<label for="contrasena"> Contraseña: </label>
<input type="password" name="contrasena" id="contrasena" placeholder="Escribe tu contraseña" >
</div>
<p class="formulario_input-error">La contraseña no puede tener espacios.</p>
<br>
<div class="formulario_grupo" id="grupo_contrasena2">
<label for="contrasena2"> Repetir contraseña: </label>
<input type="password" name="contrasena2" id="contrasena2" placeholder="Escribe tu contraseña" >
</div>
<p class="formulario_input-error">Las contraseñas deben coincidir.</p>
<br>
<label for="sexo"> Sexo:</label>
<select name="Sexo:" id="sexo">
<option value="Masculino">Masculino</option>
<option value="Femenino">Femenino</option>
</div>
<div class="formulario_mensaje" id="formulario_mensaje"
<p>Error </p>
</div>
<input type="reset" id="reset" name="reset" value="Borrar">
<br>
<input type="submit" id="formulario_btn" name="formulario_btn" value="Enviar">
</form>
<script src="intro.js"></script>
</body>
</html>
Aquí adjunto CSS:
form {
width:60%;
border:10px solid #4682B4;
margin 30px;
padding 40px;
background:#dafae1 ;
}
.formulario_input-error{
font-size: 10px;
font-family: "Georgia";
color: #4d4d4f;
margin-left: 20px;
margin-bottom: 0px;
margin-top: 0px;
display: none;
}
.formulario_input-error-activo{
display: block;
}
.formulario_mensaje-exito{
font-size: 13px;
font-family: "Georgia";
color: #4d4d4f;
display: none;
}
.formulario_mensaje-exito-activo{
display: block;
}
.formulario_validacion-estado{
position: absolute;
right: 10px;
bottom: 15px;
z-index: 100;
font-size: 14px;
opacity: 0;
}
label{
font-size:14px;
font-family: "Georgia";
display:block;
margin-left: 5px;
margin-top: 10px;
color: #4d4d4f;
}
input{
margin-bottom: 18px;
margin-left: 14px;
width: 94%;
padding:8px;
border:1px solid #C0C0C0;
box-sizing: border-box;
background: #F8F8FF;
}
select{
margin-bottom: 20px;
width: 60%;
margin-left: 14px;
border:2px solid #C0C0C0;
}
input:focus {
border: 4px solid #4169E1;
}
input[type="radio"]{
margin-bottom: 1px;
margin-top: 1px;
}
input[type="submit"]{
background: #4169E1;
color: #F8F8FF;
width: 50%;
margin-left: 170px;
}
input[type="submit"]:hover{
background:#4682B4;
cursor: pointer;
width: 46%;
margin-left: 185px;
}
input[type="reset"]{
background: #4169E1;
color: #F8F8FF;
width: 50%;
margin-left: 170px;
}
input[type="reset"]:hover{
background:#4682B4;
cursor: pointer;
width: 46%;
margin-left: 185px;
}
.formulario_grupo-correcto .formulario_validacion-estado{
color: #1ed12d;
opacity 1;
}
.formulario_grupo-incorrecto.formulario_label{
color: #bb2929;
}
.formulario_grupo-incorrecto.formulario_validacion-estado{
color: #bb2929;
opacity: 1;
}
.formulario_grupo-incorrecto.formulario_input{
border: 3px solid #bb2929;
}
y Aquí js (donde me aparecio el error)
const formulario = document.getElementById("formulario");
const inputs = document.querySelectorAll("#formulario input");
const expresiones = {
contrasena: /^.{4,14}$/,
}
const validarFormulario = (e) => {
switch (e.target.name) {
case "contrasena":
if(expresiones.contrasena.test(e.target.value)){
document.getElementById("grupo_contrasena").classList.remove("formulario_grupo-incorrecto");
document.getElementById("grupo_contrasena").classList.add("formulario_grupo-correcto");
document.querySelector("#grupo_correo .formulario_input-error").classList.remove ("formulario_input-error-activo");
}else{
document.getElementById("grupo_contrasena").classList.remove("formulario_grupo-incorrecto");
document.getElementById("grupo_contrasena").classList.add("formulario_grupo-correcto");
document.querySelector("#grupo_contrasena .formulario_input-error").classList.remove ("formulario_input-error-activo");
}
validarContrasena2 ();
break;
case "contrasena2":
validarContrasena2 ();
break;
}
}
const validarContrasena2 = () => {
const inputContrasena1= document.getElementById("contrasena");
const inputContrasena2= document.getElementById("contrasena2");
if (inputPassword1.value !== inputPassword2.value){
document.getElementById("grupo_contrasena2").classList.add("formulario_grupo-incorrecto");
document.getElementById("grupo_contrasena2").classList.remove("formulario_grupo-correcto");
document.querySelector("#grupo_contrasena2 .formulario_input-error").classList.add ("formulario_input-error-activo");
}
else {
document.getElementById("grupo_contrasena2").classList.add("formulario_grupo-incorrecto");
document.getElementById("grupo_contrasena2").classList.remove("formulario_grupo-correcto");
document.querySelector("#grupo_contrasena2 .formulario_input-error").classList.add ("formulario_input-error-activo");
}
}
inputs.forEach((input) => {
input.addEventListener("keyup", () => {
input.addEventListener("blur", validarFormulario);
});
});
formulario.addEventListener("submit", (e) => {
e.preventDefault();
});
|
|
|
|
|
This error is telling you that (wherever your password input's textbox is showing up and you've typed in the password) typing in the password, again but this time to validate it as this is another textbox where you are now testing whether you've typed correctly in the first textbox, has called a procedure that, for it's input NULL (nothing has been input), the condition is unacceptable.
Este error le indica que (siempre que aparezca el cuadro de texto de ingreso de su contraseña y haya ingresado la contraseña) ingrese la contraseña nuevamente, pero esta vez para validarla, ya que este es otro cuadro de texto donde ahora está probando si ha escrito correctamente en el primer cuadro de texto, ha llamado a un procedimiento que, por su entrada NULL (no se ha ingresado nada), la condición es inaceptable.
|
|
|
|
|
Update: I am not sure now if that is the reason why it doesn't work on these pages. I am getting the following error on these pages:
Uncaught TypeError: $ is not a function
on line 6
The menu works as expected if I recreate it outside of Joomla.
Hi, I am trying to create a responsive menu using jQuery following a tutorial. I am good with HTML and CSS but very rocky with Javascript.
I thought I had got everything working but then realised the mobile toggle menu only works on the pages where the menu item for that page has the css class of 'parent'. Since I have only one dropdown menu in my navigation I need it to also work on the other items.
For styling reasons I need the other menu items to have a different class set, which I can do. But I can't figure out how to edit the code to add the toggle menu to the other class as well as the parent class.
I hope this makes sense!
This is the JS code I have:
var ww = document.body.clientWidth;
$(document).ready(function() {
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$("#nav").toggle();
});
$("#nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
adjustMenu();
});
function adjustMenu() {
if (ww < 974) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$("#nav").hide();
} else {
$("#nav").show();
}
$("#nav li").unbind('mouseenter mouseleave');
$("#nav li a.parent").unbind("click").bind("click", function(e) {
e.preventDefault();
$(this).parent("li").toggleClass('hover');
});
} else {
$(".toggleMenu").css("display", "none");
$("#nav").show();
$("#nav li").removeClass("hover");
$("#nav li a").unbind("click");
$("#nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
$(this).toggleClass('hover');
});
}
}
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
modified 25-Feb-22 12:18pm.
|
|
|
|
|
|
|
I actually got this working fine outside of the Joomla CMS I am using so I am wondering if there's some sort of conflict going on and it's not as simple as I thought it might be. Might help if I take a break and eat something as I am going cross eyed with this!
|
|
|
|
|
wrote: Uncaught TypeError: $ is not a function
Either you haven't included jQuery properly, or you've included it after this script.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
I have used THIS SCRIPT to create collapsible sections into my website.
as you can see I have problem since inside the collapsible section, I inserted a drop down menu',
when I expand section and I click on drop down menu' to see more voices, the collapsible section doesn't expand automatically with the content. How can I make the collapsible section automatically expand\contract according to its content?
this is the javascript part:
<pre><script>
window.addEventListener("DOMContentLoaded", e => {
const getContainerHeight = el => {
return window.getComputedStyle(el).getPropertyValue("height");
};
const setTransitionHeights = el => {
let containerWasOpen = el.classList.contains("open");
el.style.height = null;
el.classList.remove("open", "ready");
el.dataset.initial = getContainerHeight(el);
el.classList.add("open");
el.dataset.final = getContainerHeight(el);
el.classList.remove("open");
if(containerWasOpen) {
el.classList.add("open");
el.style.height = el.dataset.final;
} else {
el.style.height = el.dataset.initial;
}
el.classList.add("ready");
};
document.querySelectorAll(".collapsible.slow").forEach(current => {
let toggler = document.createElement("div");
toggler.className = "toggler";
current.appendChild(toggler);
setTransitionHeights(current);
toggler.addEventListener("click", e => {
current.style.height = current.classList.toggle("open") ? current.dataset.final : current.dataset.initial;
});
});
window.addEventListener("resize", e => {
document.querySelectorAll(".collapsible.slow").forEach(current => {
setTransitionHeights(current);
});
});
});
</script>
and this is the CSS part:
<pre lang="CSS"><pre> .boxed {
border: 1px solid #ccc;
padding: 1em 2em;
}
.collapsible.slow {
position: relative;
overflow: hidden;
padding-bottom: 0.5em;
transition: height 0.5s ease-out;
}
.collapsible.slow > * {
display: none;
}
.collapsible.slow > p:first-child,
.collapsible.slow.open > *,
.collapsible.slow.ready > * {
display: revert;
}
.collapsible.slow > .toggler {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: #fff;
text-align: center;
cursor: pointer;
}
.collapsible.slow > .toggler::after {
content: "\25bc";
}
.collapsible.slow.open > .toggler::after {
content: "\25b2";
}
If required I can write also the drop down menu' code.
Thanks in advance for sharing your experience.
Regards,
jeyjack
modified 26-Feb-22 8:05am.
|
|
|
|
|
<pre>window.addEventListener("DOMContentLoaded", e => {
const getContainerHeight = el => {
return window.getComputedStyle(el).getPropertyValue("height");
};
const setTransitionHeights = el => {
let containerWasOpen = el.classList.contains("open");
el.style.height = null;
el.classList.remove("open", "ready");
el.dataset.initial = getContainerHeight(el);
el.classList.add("open");
el.dataset.final = getContainerHeight(el);
el.classList.remove("open");
if(containerWasOpen) {
el.classList.add("open");
el.style.height = el.dataset.final;
} else {
el.style.height = el.dataset.initial;
}
el.classList.add("ready");
};
document.querySelectorAll(".collapsible.slow").forEach(current => {
let toggler = document.createElement("div");
toggler.className = "toggler";
current.appendChild(toggler);
setTransitionHeights(current);
toggler.addEventListener("click", e => {
current.style.height = current.classList.toggle("open") ? current.dataset.final : current.dataset.initial;
});
});
document.querySelectorAll(".collapsible.slow").forEach(l=>{
l.addEventListener("click", e => {
document.querySelectorAll(".collapsible.slow").forEach(current => {
setTransitionHeights(current);
});
});
})
});
|
|
|
|
|
I have this cookie that I wrote in PHP, and I need to read the cookie to get the Project Number. I tried using decodeUri but it strips the semi colon out of the JSON. I also plagurized some JavaScript to get the cookie in the first place.
If I use this URL Decoder/Encoder it gives me the proper decoding that I need.
It looks like URL encoding to me.
cookie: {"timeStamp"%3A"02\%2F17\%2F2022 10%3A15%3A02"%2C"coreMode"%3A"open"%2C"}
function getCookie(name) {
let cookie = {};
document.cookie.split(';').forEach(function(el) {
let [k,v] = el.split('=');
cookie[k.trim()] = v;
})
return cookie[name];
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
How are you generating that cookie value? It looks like URL-encoded JSON, but the JSON is invalid.
"{\"timeStamp\":\"02/17/2022 10:15:02\",\"coreMode\":\"open\",\"}" That trailing quote before the closing brace doesn't match an opening quote. Attempting to parse the value will give you an error:
const value = JSON.parse(decodeURIComponent('{"timeStamp"%3A"02\%2F17\%2F2022 10%3A15%3A02"%2C"coreMode"%3A"open"%2C"}'));
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
I pulled that example out of storage in the browser, and cut off a large section just to use as an example.
This is the cookie straight out of the browser storage. Pretty ugly but that's just how it writes even with pretty print.
%7B%22timeStamp%22%3A%2202%5C%2F18%5C%2F2022%2009%3A41%3A35%22%2C%22coreMode%22%3A%22open%22%2C%22projectIntegrityCheck%22%3Afalse%2C%22projectNumber%22%3A%225342%22%2C%22projectType%22%3A%22poolspa%22%2C%22projectStage%22%3A%22designing%22%2C%22projectVersion%22%3A0%2C%22projectFinalVersion%22%3A0%2C%22projectJob%22%3A0%2C%22projectEmployeeId%22%3A91%2C%22projectEmployeeName%22%3A%22Jim%20Miller%22%2C%22projectCustomerId%22%3A%225324%22%2C%22projectCustomerName%22%3A%22Jim%20Kirker%202022021602%22%2C%22projectAddNumber%22%3A-1%2C%22projectSalesId%22%3A%2291%22%2C%22originalBookPrice%22%3A32761.2153%2C%22bookPrice%22%3A32761.2153%2C%22preBookPrice%22%3A32761.2153%2C%22contractAmount%22%3A0%2C%22inputId%22%3A%22%22%2C%22inputName%22%3A%22Selection%20Name%3A%22%2C%22inputPrice%22%3A0%2C%22inputMode%22%3A%22ADD%22%2C%22addTotal%22%3A0%2C%22bookDifference%22%3A0%2C%22userName%22%3A%22jimk%22%2C%22userType%22%3A%22Executive%22%2C%22versionNumber%22%3A-1%2C%22versionBookPrice%22%3A32761.2153%2C%22salesCommission%22%3A0%7D
The same cookie URL decoded ...
{"timeStamp":"02/18/2022 09:41:35","coreMode":"open","projectIntegrityCheck":false,"projectNumber":"5342","projectType":"poolspa","projectStage":"designing","projectVersion":0,"projectFinalVersion":0,"projectJob":0,"projectEmployeeId":91,"projectEmployeeName":"Jim Miller","projectCustomerId":"5324","projectCustomerName":"Jim Miller 2022021602","projectAddNumber":-1,"projectSalesId":"91","originalBookPrice":32761.2153,"bookPrice":32761.2153,"preBookPrice":32761.2153,"contractAmount":0,"inputId":"","inputName":"Selection Name:","inputPrice":0,"inputMode":"ADD","addTotal":0,"bookDifference":0,"userName":"jimk","userType":"Executive","versionNumber":-1,"versionBookPrice":32761.2153,"salesCommission":0}
Maybe reading this cookie with JavaScript is not a good idea. I found that I don't really need this since my projectClose.php will read the cookie and close the project.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Given that string, JSON.parse and decodeURIComponent work fine:
const parsedCookie = JSON.parse(decodeURIComponent("%7B%22timeStamp%22%3A%2202%5C%2F18%5C%2F2022%2009%3A41%3A35%22%2C%22coreMode%22%3A%22open%22%2C%22projectIntegrityCheck%22%3Afalse%2C%22projectNumber%22%3A%225342%22%2C%22projectType%22%3A%22poolspa%22%2C%22projectStage%22%3A%22designing%22%2C%22projectVersion%22%3A0%2C%22projectFinalVersion%22%3A0%2C%22projectJob%22%3A0%2C%22projectEmployeeId%22%3A91%2C%22projectEmployeeName%22%3A%22Jim%20Miller%22%2C%22projectCustomerId%22%3A%225324%22%2C%22projectCustomerName%22%3A%22Jim%20Kirker%202022021602%22%2C%22projectAddNumber%22%3A-1%2C%22projectSalesId%22%3A%2291%22%2C%22originalBookPrice%22%3A32761.2153%2C%22bookPrice%22%3A32761.2153%2C%22preBookPrice%22%3A32761.2153%2C%22contractAmount%22%3A0%2C%22inputId%22%3A%22%22%2C%22inputName%22%3A%22Selection%20Name%3A%22%2C%22inputPrice%22%3A0%2C%22inputMode%22%3A%22ADD%22%2C%22addTotal%22%3A0%2C%22bookDifference%22%3A0%2C%22userName%22%3A%22jimk%22%2C%22userType%22%3A%22Executive%22%2C%22versionNumber%22%3A-1%2C%22versionBookPrice%22%3A32761.2153%2C%22salesCommission%22%3A0%7D"));
I can't see a semi-colon which would be stripped out. 
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
decodeUriComponent did not occur to me. I'll go ahead and give that a try and finish the module.
I may post another question soon about communicating between browser tabs using LocalStorage or opening up some sort of channel communication. The goal is for an inactivity timer on the main browser tab to close other open tabs that feed off the same cookie, so when the cookie is wiped, the other open tabs won't bomb from the missing cookie.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Hi
I am working with Asp.net and using Angular JS
For below code
<a href="{{image.link}}">
when we check view-source then it is showing the same
<a href="{{image.link}}">
while in Inspect element in browser it shows
<a href="https://urltoredirect.com">
How it can be possible that in page View-source also it will show
<a href="https://urltoredirect.com">
As This is causing the site to appear to have broken links and could impact SEO.
Thanks in Advance
|
|
|
|
|
|
Hello, I am trying to teach myself web development and I found a form I wanted to duplicate on a roof construction website.
All my input boxes are centered except the last one that's a bit off and I cannot figure out why. The class is "powerwall-battery-input"
Please don't be like stack overflow and constantly criticize the format of my question because it has gotten old over there, which is why I am here.
Thanks
Here is my code:
<main class="calc-wrapper">
<!--
<form class="calc-form" action="form-results.html" method="get">
<label for="first-name" class="label first-name-label">
First Name
</label>
<input type="text" class="first-name-input" />
<label for="last-name" class="label last-name-label"> Last Name </label>
<input type="text" class="last-name-input" />
<!--
<label class="label addr-sec-label" for="addr-sec"
>Address Selection*</label
>
<input type="text" class="input" placeholder="Address" id="location" />
<input
type="text"
class="input"
placeholder="Apt, Suite, etc (optional)"
/>
<input type="text" class="input" placeholder="City" id="locality" />
<input
type="text"
class="input"
placeholder="State/Province"
id="administrative_area_level_1"
/>
<input
type="text"
class="input"
placeholder="Zip/Postal code"
id="postal_code"
/>
<input type="text" class="input" placeholder="Country" id="country" />
<div class="map" id="map"></div>
<!--
<div class="roof-complexity">
<label class="label roof-complexity-label" for="roof-complexity"
>Roof Complexity Type*</label
>
<select
class="roof-complexity-input"
id="roof-complexity-input"
name="roof-complexity"
>
<option selected disabled hidden>Select an Option</option>
<option id="simple" value="simple">Simple</option>
<option id="moderate" value="moderate">Moderate</option>
<option id="complex" value="complex">Complex</option>
</select>
</div>
<div class="system-size">
<label class="label system-size-label" for="system-size"
>Select System Size*</label
>
<button class="btn calc-form-btn system-size-minus-btn" type="button">
-
</button>
<input
class="system-size-input"
id="system-size-input"
value="4.0"
/>
<button class="btn calc-form-btn system-size-plus-btn" type="button">
+
</button>
</div>
<div class="powerwall-battery">
<label class="label powerwall-battery-label" for="powerwall-battery"
>Select Powerwall Battery Storage (in units)*</label
>
<button
class="btn calc-form-btn powerwall-battery-minus-btn"
type="button"
>
-
</button>
<input class="powerwall-battery-input" id="powerwall-battery-input" />
<button
class="btn calc-form-btn powerwall-battery-plus-btn"
type="button"
>
+
</button>
</div>
</form>
<!--
<div class="totals-section">
<label class="label roof-before-itc" for="roof-before-itc"
>Solar Roof Price Before Incentives</label
>
<input type="text" class="input" id="roof-price-before-itc" />
<label
class="label powerwall-price-before-itc"
for="powerwall-price-before-itc"
>Powerwall Price Before Incentives</label
>
<input class="input" id="powerwall-price-before-itc" value=" " />
<label class="label est-total-before-itc" for="est-total-before-itc"
>Estimated Total Price Before Incentives</label
>
<input type="text" class="input" id="est-total-before-itc" />
<label class="label est-itc" for="est-itc">Estimated Solar ITC</label>
<input type="text" class="input" id="est-itc" />
</div>
</main>
:root {
--mainFont: "Arial";
--textFont: "Open Sans", sans-serif;
--secondaryFont: "Raleway", sans-serif;
--primary: #4f5449;
--darkGray: #2f2e2e;
--lightGray: #ebebeb;
--white: #fff;
--black: #000;
--darkorange: orange;
}
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
}
body {
font-family: var(--mainFont);
font-size: 1.6rem;
line-height: 2;
}
.calc-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.calc-form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 5rem;
margin-bottom: 5rem;
width: 50%;
padding: 5rem;
}
.first-name-input {
width: 50%;
padding: 2rem;
}
.last-name-input {
width: 50%;
padding: 2rem;
}
.sb-title {
font-family: var(--mainFont);
font-weight: bold;
}
.addr-sec-input {
width: 100%;
padding: 2rem;
}
.input {
width: 50%;
padding: 2rem;
text-align: center;
}
.label {
margin-top: 2rem;
font-weight: bold;
text-align: center;
display: block;
}
.home-size-input {
padding: 2rem;
text-align: center;
}
.roof-complexity-input {
padding: 2rem;
text-align: center;
}
.system-size {
display: block;
}
.system-size-input {
padding: 2rem;
text-align: center;
}
.powerwall-battery {
display: block;
}
.powerwall-battery-input {
padding: 2rem;
text-align: center;
}
.calc-form-btn {
background-color: var(--primary);
border: none;
color: var(--white);
padding: 0 1.5rem;
text-align: center;
text-decoration: none;
font-size: 2rem;
border-radius: 0.5rem;
cursor: pointer;
}
.totals-section {
border: var(--black);
border-style: solid;
background: var(--darkorange);
width: 50%;
margin-right: 5rem;
border-width: 1px;
padding: 5rem;
display: flex;
flex-direction: column;
align-items: center;
width: 25%;
}
.submit-section {
text-align: center;
margin-bottom: 5rem;
}
.submit-btn {
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #FFFFFF;
color: #FFFFFF;
background-color: var(--primary);
padding: 4rem;
font-size: 2rem;
text-transform: uppercase;
border-radius: 1rem;
width: 10%;
}
.submit-btn {
cursor: pointer;
}
modified 11-Feb-22 20:33pm.
|
|
|
|
|
I am not a CSS expert. and this is in the javascript forum. But what the heck. Your issue might be the width setting about width overriding some other areas.
width: 50%; //this is all over the place.
You might specific in your powerwall-battery-input the width variable as well. Just a thought.
reminder I am not a CSS person.
To err is human to really elephant it up you need a computer
|
|
|
|
|
Well, my idea of using converting my JavaScript into modules, so I have just one copy of every function to manage hit a concrete wall today upon implementing my great idea. Perhaps I'm just overlooking something or it's just not feasible to do.
This is a plain PHP 7.4 project with some Bootstrap 5, Feather Fonts, plain vanilla Javascript. No webpacks or Gulp yet. No compressed code or script. Just a folder called assets that containers all the CSS, Scripts, Images. This PHP project has many includes for Bootstrap Modals, headers, footers, navigation. I'm using PHP Storm from Jet Brains to create with.
Let's start with "must declare type as module" with you use a external script element for a module that has exports. Then make that change from "text/javascript" to "module" and now that error clears, and the new error comes up, "function saveProjectWithProgress() is undefined".
I made a core module, literally called core.module.js, which consolidates all my special functions. This is the whole file.
export { dismissProjectNoticesAsync as dismissProjectNotices } from './projectNoticesModal.module.js';
export { saveVersionNoteAsync as saveVersionNote } from './saveVersionNote.module.js';
export { saveManagerAsync as saveManager } from './saveManagerAsync.module.js';
export { saveSwanJobAsync as saveSwanJob } from './saveSwanJobAsync.module.js';
export { saveCommentAsync as saveComment } from './saveCommentsAsync.module.js';
export { removeCommentAsync as removeComment } from './removeComment.module.js';
export { addFeatureAsync as addFeature, removeFeatureAsync as removeFeature, validateFeatureAsync as validateFeature } from './features.module.js';
export { checkSupplierAsync as checkSupplier } from './checkSupplierAsync.module.js';
export { recalculateAsync as recalculate } from './recalculateProjectAsync.module.js';
export { saveProjectAsync as saveProject } from './saveProjectAsync.module.js';
export { saveProjectWithProgressAsync as saveProjectWithProgress } from './saveProjectWithProgress.module.js';
And my PHP HTML, just a snippet of it.
<button type="Button" onclick="saveProjectWithProgress()">Save</button>
<?php include dirname(DIR, 2) . '/includes/modals/core/confirmSave.modal.php'; ?>
<?php include dirname(DIR, 2) . '/includes/modals/core/projectNotices.modal.php'; ?>
<script type="module" src="/pcad/assets/scripts/core/module/core.module.js"></script>
And the error from the console ....
Uncaught ReferenceError: saveProjectWithProgress is not defined<br />
onclick <a href="https://core/breakdown/updateBreakdown.phtml:1">https:
updateBreakdown.phtml:1:1<br />
I understand the error message. I've done this before, but I made a script element, imported the function and ran the function inside the script element, but the concept of importing a function and using it in onclick="udv()" doesn't cut it.
<script>
import { udv } from 'udv';
udv();
</script>
PHPStorm suggested that I wrap the onclick="" with a function ... But this seems strange to me.
<button type="Button" onclick="function saveProjectWithProgress() { } saveProgectWithProgress()">Save</button>
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
So all my modules were created, imported and stored on the module level above the DOM. I had to get these modules down to the DOM level to be defined and consumed. But if I write individual window statements, I will run into global pollution? So you put them all in a window namespace?
It works now, so far so good, and is exactly what I wanted to achieve with having a unified core module to call throughout the core of my PHP project. This is quite promising so far, hope it works out. Started to lose version control of all the scripts in my project, and now I've eliminated duplicate script functions.
onclick="core.saveProjectWithProgress()"
import { dismissProjectNoticesAsync as dismissProjectNotices } from './projectNoticesModal.module.js';
import { saveVersionNoteAsync as saveVersionNote } from './saveVersionNote.module.js';
import { saveManagerAsync as saveManager } from './saveManagerAsync.module.js';
import { saveSwanJobAsync as saveSwanJob } from './saveSwanJobAsync.module.js';
import { saveCommentAsync as saveComment } from './saveCommentsAsync.module.js';
import { removeCommentAsync as removeComment } from './removeComment.module.js';
import { addFeatureAsync as addFeature, removeFeatureAsync as removeFeature, validateFeatureAsync as validateFeature } from './features.module.js';
import { checkSupplierAsync as checkSupplier } from './checkSupplierAsync.module.js';
import { recalculateAsync as recalculate } from './recalculateProjectAsync.module.js';
import { saveProjectAsync as saveProject } from './saveProjectAsync.module.js';
import { saveProjectWithProgressAsync as saveProjectWithProgress } from './saveProjectWithProgress.module.js';
window.core = {
dismissProjectNotices,
saveVersionNote,
saveManager,
saveSwanJob,
saveComment,
removeComment,
addFeature,
removeFeature,
validateFeature,
checkSupplier,
recalculate,
saveProject,
saveProjectWithProgress
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
You'll probably need to use addEventListener[^] to wire up the event handlers, rather than using the on... attributes.
<button id="saveProjectWithProgressButton" type="button">Save</button>
import { saveProjectWithProgress } from 'core';
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('saveProjectWithProgress').addEventListener('click', saveProjectWithProgress);
});
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
That's a good idea!
Plus I have Bootstrap modal event listeners to wire up as well.
I have 5 main web pages in my CORE, and the goal was to use the same core.module.js on all 5 pages. Yes, that will apply on all 5 pages; I just had to think that thought through. That saveProjectWithProgress is on a PHP include that is a Bootstrap Modal on all 5 web pages.
Thanks Richard!
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Wow, feels really good to finally get my haystack cleaned into a nice organized collection of scripts, with some added wiring as well. This is what I wanted in the thread below when I was looking for a way to create common external scripts that are used over and over.
I'll have to do more research on this, perhaps some lazy loading and look into global pollution. This is looking very promising so far.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
I have a function that I need to call for every one of my Plain Vanilla Javascript API calls.
So I made a module and loaded in in a common header.
<script type="module" src="/assets/scripts/authCookie.module.js"></script>
Should I be calling this module authCookie.module.cjs?
export function getCookie() {
}
I have all these scripts
<script type="text/javascript" src="/assets/scripts/breakdown/editBreakdownItem.script.js" ></script>
I get this error, import must be at the top of a module. I understand the error, it's want me to declare this as a module. Do you think this is the right thing to do? I ran a test and the error message went away. But I'm reluctant to just charge through the project and make the change. I need some clarity here.
import { getAuthToken } from 'module';
Just wondering what the right way would be. I'm certainly not going to add these functions to every script file. The internet seems polluted with all sorts of ideas.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
You know what. I can just pick up the cookie in the PHP API I wrote, and match the cookie token in the database. I don't need to transmit the unique token via my JavaScript API, but that would be cool. I just need to get some sort of basic auth into my API's to secure them.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
