I'm getting an error in console 'Uncaught TypeError: Cannot read property 'value' of undefined at HTMLInputElement.' at line 18. I couldn't find any error in my js code, also when alert fires it doesn't go in one go infact it appears 2-3 times. Also my script file is at the end of the body.Please help me find the error.
let editbox = document.getElementById('editbox');
let val = editbox.innerText;
let showAlert = document.getElementById('alrt');
let edit = document.getElementsByClassName('edit');
let cl = document.getElementsByClassName('input')
editbox.addEventListener('click', clicked);
function clicked() {
if (cl.length == 0) {
editbox.innerHTML = '<input type="text" class="input">';
cl[0].value = val
}
showAlert.style.visibility = 'visible';
cl[0].addEventListener('blur', function () {
if(cl[0].value.length > 0){
val = cl[0].value
editbox.innerHTML = `<div class="edit">${val}</div>`;
showAlert.style.visibility = 'hidden'
} else {
alert('You can not leave box empty')
}
})
}
#import url('https://fonts.googleapis.com/css2?family=Oswald&family=Raleway:wght#300&display=swap');
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container{
background-color: #83AF9B;
border: 4px solid black;
width: 80%;
margin: 50px auto;
padding: 5px;
color: rgb(0, 0, 0);
display: flex;
justify-content: center;
height: 100px;
border-radius: 10px;
box-shadow: 10px 10px 40px grey;
flex-direction: column;
}
.edit {
margin: 0px 0px 0px 10px;
font-size: 25px;
font-family: 'Oswald', sans-serif;
}
.alert{
margin-left: 10px;
font-family: 'Raleway', sans-serif;
font-size: 12px;
visibility: hidden;
}
.input{
margin: 0px 0px 0px 10px;
font-size: 25px;
font-family: 'Oswald', sans-serif;
background: none;
color: black;
border: 1px solid black;
border-radius: 5px;
outline: none;
padding-left: 2px;
width: 97%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Editable div</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box" id="editbox">
<div class="edit">Click Here To Edit Me.</div>
</div>
<div class="alert" id="alrt">You can now edit it</div>
</div>
<script src="index.js"></script>
</body>
</html>
the "problem" is with the event listener inside of the big function
the event listener is activated when there is a change in cl[0] and naturally you overwrite editbox.innerHTML when this listener is activated so it gets activated again (asynchronous logic)
the solution is simply saying if(cl[0] != undefined) {do rest of function}
my example is below (also prevents overlap of listeners)
let editbox = document.getElementById('editbox');
let val = editbox.innerText;
let showAlert = document.getElementById('alrt');
let edit = document.getElementsByClassName('edit');
var cl = document.getElementsByClassName('input')
editbox.addEventListener('click', clicked);
function clicked() {
if (cl.length == 0) {
editbox.innerHTML = '<input type="text" class="input">';
cl[0].value = val
}
showAlert.style.visibility = 'visible';
function theEditor () {
if(cl[0] != undefined){
if(cl[0].value.length > 0){
val = cl[0].value;
editbox.innerHTML = `<div class="edit">${val}</div>`;
showAlert.style.visibility = 'hidden'
} else {
alert('You can not leave box empty')
}
}
}
cl[0].removeEventListener('blur', theEditor)
cl[0].addEventListener('blur', theEditor)
}
#import url('https://fonts.googleapis.com/css2?family=Oswald&family=Raleway:wght#300&display=swap');
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container{
background-color: #83AF9B;
border: 4px solid black;
width: 80%;
margin: 50px auto;
padding: 5px;
color: rgb(0, 0, 0);
display: flex;
justify-content: center;
height: 100px;
border-radius: 10px;
box-shadow: 10px 10px 40px grey;
flex-direction: column;
}
.edit {
margin: 0px 0px 0px 10px;
font-size: 25px;
font-family: 'Oswald', sans-serif;
}
.alert{
margin-left: 10px;
font-family: 'Raleway', sans-serif;
font-size: 12px;
visibility: hidden;
}
.input{
margin: 0px 0px 0px 10px;
font-size: 25px;
font-family: 'Oswald', sans-serif;
background: none;
color: black;
border: 1px solid black;
border-radius: 5px;
outline: none;
padding-left: 2px;
width: 97%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Editable div</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box" id="editbox">
<div class="edit">Click Here To Edit Me.</div>
</div>
<div class="alert" id="alrt">You can now edit it</div>
</div>
<script src="index.js"></script>
</body>
</html>
Hi I am trying to have 20 customize audio players though I could only make the first one work. As soon as I copy and paste the new audio in html it does not start playing. I am not sure if the only way is by giving a unique id to each audio or if there is a way to avoid doing that by changing the javascript code.
thanks!!!
it is also online here http://musictext.yt/audio/audio.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de Video</title>
<link rel="stylesheet" href="reproductor.css">
<script src="reproductor.js"></script>
</head>
<body>
<section id="reproductor">
<audio id="medio" width="400" height="400">
<source src="rout.mp3">
</audio>
<nav>
<div id="botones">
<button class="button" id="reproducir" >play</button>
</div>
<div id="barra">
<div id="progreso">
</div>
</div>
<div style="clear: both"></div>
</nav>
</section>
</body>
</html>
JS
function iniciar() {
maximo=80;
medio=document.getElementById('medio');
reproducir=document.getElementById('reproducir');
barra=document.getElementById('barra');
progreso=document.getElementById('progreso');
reproducir.addEventListener('click', presionar, false);
barra.addEventListener('click', mover, false);
}
function presionar(){
if(!medio.paused && !medio.ended) {
medio.pause();
reproducir.innerHTML='play';
window.clearInterval(bucle);
}else{
medio.play();
reproducir.innerHTML='pause';
bucle=setInterval(estado, 1000);
}
}
function estado(){
if(!medio.ended){
var total=parseInt(medio.currentTime*maximo/medio.duration);
progreso.style.width=total+'px';
}else{
progreso.style.width='0px';
reproducir.innerHTML='play';
window.clearInterval(bucle);
}
}
function mover(e){
if(!medio.paused && !medio.ended){
var ratonX=e.pageX-barra.offsetLeft;
var nuevoTiempo=ratonX*medio.duration/maximo;
medio.currentTime=nuevoTiempo;
progreso.style.width=ratonX+'px';
}
}
window.addEventListener('load', iniciar, false);
CSS
body{
text-align: center;
}
header, section, footer, aside, nav, article, figure, figcaption, hgroup{
display : block;
}
#reproductor{
width: 100px;
height: 100px;
margin: 60px auto;
padding: 5px;
background: blue;
border: 1px solid #666666;
}
nav{
margin: 1px 0px;
}
.button {
font-family: arial;
background-color: black;
border: none;
color: white;
padding: ;
text-align: center;
font-size: 12px;
margin: 4px 2px;
opacity: 0.6;
transition: 0.3s;
display: inline-block;
text-decoration: none;
cursor: pointer;
}
.button:hover {opacity: 1}
#botones{
background-color: black;
width: 100px;
height: 20px;
}
#barra{
position: relative;
width: 88px;
height: 66px;
padding: 4px;
border: 1px solid black;
background: white;
}
#progreso{
position: absolute;
width: 0px;
height: 60px;
background: black;
}
I am trying to fit a single character font-size to its parent div. is it possible?
Maybe it's a Font scaling based on width of container
by #Francesca duplicate?
But my context is a Single Character so maybe it is possible but font can be normal font-family or iconic font like font-awesome.
I appreciate a fiddle work
body {
font-size: 10px;
font-family: Arial
}
.box1 {
border: 1px solid red;
margin: 10px;
width: 50px;
height: 50px;
font-size: 4vw;
}
.box2 {
border: 1px solid blue;
margin: 10px;
width: 200px;
height: 200px;
font-size: calc(3vw + 3vh);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box1">x</div>
<button class="box1">x</button>
<div class="box2"><i class="fa fa-remove"></i></div>
<button class="box2"><i class="fa fa-remove"></i></button>
I have try it with some js code but its depend on parents width or height.
var fontSize = parseInt($(".box1").height())+"px";
$(".box1").css('font-size', fontSize);
var fontSize = parseInt($(".box2").height())+"px";
$(".box2").css('font-size', fontSize);
body {
font-size: 10px;
font-family: Arial
}
.box1 {
border: 1px solid red;
margin: 10px;
width: 50px;
height: 50px;
text-align:center;
line-height: 45px;
}
.box2 {
border: 1px solid blue;
margin: 10px;
width: 200px;
height: 200px;
text-align:center;
}
.box2 i {
display: block;
line-height: 97%;
vertical-align: middle;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box1">x</div>
<button class="box1">x</button>
<div class="box2"><i class="fa fa-remove"></i></div>
<button class="box2"><i class="fa fa-remove"></i></button>
I'm new to GSAP, and I'm trying to build a function where it will scroll to a certain point on a page, but I don't quite understand how to correct use GSAP plugins. I've managed to use scripts to tween colour, size and position but I can't get scroll to work.
My goal is to have the page scroll down to a specific point (I've just set it to 9999 for the purpose of testing) when clicking the button that says "Iterate". Nothing happens.
My code looks like -
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="custom.css"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.min.js"></script>
<script src="custom.js"></script>
</head>
<body>
<div class="bigtop">
<button class="iconDo" onclick="scrollFour()">
<i class="fa fa-wrench fa-2x"></i>
<h2>Iterate</h2>
</button>
</div>
<div class="tier1">
<h1>One</h1>
<p>Body Text</p>
</div>
<div class="tier2">
<h1>Two</h1>
<p></p>
</div>
<div class="tier3">
<h1>Three</h1>
<p></p>
</div>
<div class="tier4">
<h1>Test</h1>
<p></p>
</div>
<div class="tier5">
<h1>Four</h1>
<p></p>
</div>
</body>
The script I'm using -
var scrollFour = function(){
TweenLite.to(window, 2, {scrollTo:{y:9999}, ease:Power2.easeOut});
}
And the CSS, if it's relevant -
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
}
div{
width: 100%;
padding: 0 0 30px 0;
height: 300px;
}
h1{
padding: 50px 0 0 200px;
color: #FFFFFF;
font-family: arial, sans-serif;
}
h2{
font-family: arial, sans-serif;
padding: 20px 0;
}
p{
padding: 20px 0 0 200px;
color: #FFFFFF;
font-family: arial, sans-serif;
width: 800px;
}
.iconDo{
border-radius: 10px;
float: left;
text-align: center;
padding: 10px 20px;
color: #FFFFFF;
}
.bigtop{
background-color: #6200EA;
position: fixed;
top: 0;
width: 100%;
height: 100px;
box-shadow: 0 0 30px 0 #000000;
}
.tier1{
background-color: #111111;
margin: 100px 0 0 0;
}
.tier2{
background-color: #333333;
}
.tier3{
background-color: #555555;
}
.tier4{
background-color: #777777;
}
.tier5{
background-color: #999999;
}
It looks like you just forgot to load the ScrollToPlugin:
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/ScrollToPlugin.min.js"></script>
I built a form that I need to validate with JavaScript. I tried to use this post but cannot duplicate the results: inline javascript form validation
I've created a JSBin with my code so far, including CSS and JS files: http://jsbin.com/oligol/1/edit
This is my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>xxx</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css" media="all">#import "css/master.css";</style> <style type="text/css" media="all">#import "css/master.css";</style>
<script src="contact.js" type="text/javascript">
</script>
</head>
<body>
<div id="page-container">
<div id="header"> <img src="images/header.jpg" width="900" height="243" />
</div>
<div id="main-nav">
<ul id="navlist">
<li id="active"><a href="index.html" >HOME</a></li>
<li>REQUIREMENTS</li>
<li>LINKS</li>
<li>TESTIMONIALS</li>
<li>CONTACT US</li>
</ul>
</div>
<p> </p>
<div id="content">
<p><p><p>xxxxxxx welcomes all correspondence.<br />
Please use the form below for any questions, feedback and suggestions.<br />
or call <strong><em>xxx xxx </em> xxx.xxx.7009 </strong><br />
All information is confidential<br />
<!-- <b>* required fields</b>-->
<form onSubmit="return checkForm(); method="post" action="xxx#gmail.com" >
<fieldset><strong>* required fields</strong>
<legend>Contact Form</legend>
<label for="name"> Name : <span class="required"></span></label>
<div class="input">
<input type="text" name="txtName" id="name" size="30" /><span class="message"></span>
</div>
<div class="error" id="emailError">
Required: Please enter your email address
</div>
<div class="error" id="emailError2">
This doesn't look like a real email address, please check and reenter
</div>
<label for="FieldData2"><strong> E-mail
address * :</strong>
</label>
<div class="input">
<input type="text" name="FieldData1" id="FieldData2" value="" size="30" /><span class="message"></span>
</div>
<label for="comments"> <strong>Message * :</strong>
</label><span class="message"></span>
<div class="input">
<textarea name="Message" id="message" margin-left="20px"
margin-bottom="20px" rows="18" cols="40">
</textarea>
<input type="submit" value="Send Message" name="submit" >
</div>
</fieldset>
</form>
</div>
<div id="footer">
<p>Copyrights 2013 xxx xxx | Web Design by xxx</p>
</div>
</body>
</html>
This is my CSS:
#charset "UTF-8";
/* CSS Document */
html, body {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 14px;
background-image: url(../images/backgrd.jpg);
}
.hidden {
display: none;
}
#page-container {
width: 900px;
margin: auto;
}
#containerdiv { float: left; position: relative; }
.cornerimage { position: absolute; top: 0; left: 0; }
#main-nav {
margin-top: -142px;
height: 40px;
}
#navlist {
margin-left: 290px;
padding:0;
text-align: left;
}
#navlist ul, #navlist li {
margin: 0;
padding: 0;
color: #000000;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-weight:bold;
font-size: 16px;
display: inline;
list-style-type: none;
}
#navlist a:link, #navlist a:visited {
line-height: 20px;
margin: 0 10px 0 10px;
text-decoration: none;
color: #CDCDCD;
}
#navlist a:link#current, #navlist a:visited#current,
#navlist a:hover {
border-bottom: 3px solid #000000;
padding-bottom: 2px;
background: clear;
color: #000000;
}
#header {
height: 243px;
background: #CDCDCD;
}
#sidebar-a {
float: right;
width: 181px;
height: 441px;
}
#ftcredits {
text-align: left;
padding: 5px 0 5px 0;
font-family:Tahome, Arial, Helvetica, Sans-serif;
font-size: 11px;
color: #5d3b28;
}
#ftcredits a:link, a:visited {
color: #666633;
text-decoration: none;
}
#ftcredits a:hover {
color: #db6d16;
}
#content {
padding-left: 70px;
padding-right: 10px;
background: #CDCDCD;
overflow: hidden;
}
#footer {
font-family:Tahome, Arial, Helvetica, Sans-serif;
font-size: 11px;
color: #333333;
background: #CDCDCD;
padding: 1px 20px;
line-height: 13px;
border-top: 2px solid #5d3b28;
}
#footer a {
color: #003366;
text-decoration: underline;
}
#footer a:hover {
color: #003366;
}
h1 {color: #801F18;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 21px;
font-weight: bold;
text-align: center;
padding-bottom: 15px;
}
h2 {
color: #801F18;
font-size: 18px;
font-weight: bold;
text-align: center;
padding-bottom: 15px;
}
h5 {
font-size: 15px;
color: #663333;
line-height:150%
}
exc {
font-size: 17px;
color: #000000;
line-height:150%
}
p {
line-height:150%
}
h3 {
color: #666633;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 11px;
height: 350px;
margin-top: -350px;
margin-left: 460px;
}
hr {
width: 100%;
border-top: 2px solid #333333;
border-bottom: 0;
float: left;
line-height: 13px;
}
.double_column_list li {float:left; width:50%;
}
fieldset{ padding:10px;
width:600px;
}
label {width:170px;
float:left;
text-align:right;
clear:both;
margin-bottom:20px;
}
.input {width:350px;
float:left;
margin-left:10px;
}
error{
}
#content a {
color: #003366;
text-decoration: underline;
}
#content h2 {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
#content p {
margin: 0;
padding: 0;
line-height:150%;
padding-bottom: 15px;
}
.container1 {
display: inline;
float: left;
width: 320px;
height:200px;
padding: 10px;
margin-bottom: 20px;
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border: 1px solid #black;
zoom: 100%;
background-color: rgba(83,85,89,0.3);
}
.container2 {
width: 320px;
height:200px;
padding: 10px;
margin-left: 50px;
margin-bottom: 20px;
display: inline;
float: left;
/*-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border: 1px solid #black;
zoom: 100%;
background-color: rgba(83,85,89,0.3);*/
}
This is my JS:
function checkForm() {
hideAllErrors();
var formIsValid =
/*showErrorAndFocusIf('FieldData0', isEmpty, 'nameError')*/
/*&&*/ showErrorAndFocusIf('FieldData2', isEmpty, 'emailError');
showErrorAndFocusIf('FieldData2', isAnInvalidEmail, 'emailError2');
/*&& showErrorAndFocusIf('FieldData3', isEmpty, 'categoryError')*/
showErrorAndFocusIf('FieldData1', isEmpty, 'messageError');
/* For debugging, lets prevent the form from submitting. */
if (formIsValid) {
alert("Valid form!");
return false;
}
return formIsValid;
}
function showErrorAndFocusIf(fieldId, predicate, errorId) {
var field = document.getElementById(fieldId);
if (predicate(field)) {
document.getElementById(errorId).style.display = 'inline';
if (field.select) {
field.select();
}
field.focus();
return false;
}
return true;
}
function isEmpty(field) {
return field.value == '';
}
function isAnInvalidEmail(field) {
var email = field.value;
var ok = "1234567890qwertyuiop[]asdfghjklzxcvbnm.#-_QWERTYUIOPASDFGHJKLZXCVBNM";
for(i = 0; i < email.length; i++){
if(ok.indexOf(email.charAt(i)) < 0) {
return true;
}
}
re = /(#.*#)|(\.\.)|(^\.)|(^#)|(#$)|(\.$)|(#\.)/;
re_two = /^.+\#(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
return re.test(email) || !re_two.test(email);
}
function hideAllErrors() {
/*document.getElementById("nameError").style.display = "none"*/
document.getElementById("emailError").style.display = "none";
document.getElementById("emailError2").style.display = "none";
/*document.getElementById("categoryError").style.display = "none"*/
document.getElementById("messageError").style.display = "none";
}
A few points:
Your HTML is invalid, you should something like the W3C Validator to check your HTML.
You element names and ids are inconsistent. E.g. Your "Name" field is named "txtName" but has the id "name" and your "E-mail address" field is named "FieldData1" but has the id "FieldData2". Use consistent and sensible names so that the HTML and JavaScript are easy to write and understand.
You've broken the JavaScript by removing the AND operators (&&) in the checkForm function. The showErrorAndFocusIf function returns a boolean value that is true when the specified field is valid. The return values of the calls are supposed to be combined for all of the validation constraints to determine if the whole form has passed validation.
Lastly, the ids of the fields and error messages used in the JavaScript did not match the HTML. The JavaScript uses the DOM's getElementById function to retrieve references to the fields and the error messages in the HTML, so you have to make sure that the ids match in order for the code to work.
I've corrected these problems in a new JSBin: http://jsbin.com/otinoz/2/edit