The images that appear when HTML opens is this:
The images that appear when script refreshIt() every 0.5 seconds activated is this:
But unfortunately the HTML keeps showing the first image, demonstrating that the script is not being activated.
What do I need to do to resolve this issue?
Full Script to test:
<html>
<head>
<style>
{
box-sizing: border-box;
}
.column {
float: left;
}
.left {
width: 360;
}
.middle {
width: 360;
}
.right {
width: 360;
}
.row:after {
content: "";
display: table;
clear: both;
}
</style>
<script language="JavaScript">
function refreshIt() {
if (!document.images) return;
document.images['Chart 1'].src = "https://xtsd.betfair.com/LoadRunnerInfoChartAction/?marketId=185109994&selectionId=1485567";
document.images['Chart 2'].src = "https://xtsd.betfair.com/LoadRunnerInfoChartAction/?marketId=185191931&selectionId=1222344";
document.images['Chart 3'].src = "https://xtsd.betfair.com/LoadRunnerInfoChartAction/?marketId=185192198&selectionId=47972";
setTimeout(refreshIt,500); // refresh every 0.5 secs
}
</script>
</head>
<body>
<div class="row">
<div class="column left">
<form action="" method="post" id="url-setter">
<input type="text" name="url" id="url" />
<button type="submit" name="submit">Radar 1</button>
</form>
<iframe id="the-frame" width="347" height="282" src=""></iframe>
<script type="text/javascript">
(function () {
"use strict";
var url_setter = document.getElementById('url-setter'), url = document.getElementById('url'), the_iframe = document.getElementById('the-frame');
url_setter.onsubmit = function (event) {
event.preventDefault();
the_iframe.src = url.value;
};
}());
</script>
<form method="post" target="imgChart1">
<input type="submit" value="Chart 1" />
<input type="text" id="ChartBar1" name="ChartBar1" style="width: 286px;"><br>
</form>
<img src="https://www.futebolnaveia.com.br/wp-content/uploads/2020/06/betfair-app.png" name="Chart 1">
</div>
<div class="column middle">
<form action="" method="post" id="url-setter2">
<input type="text" name="url2" id="url2" />
<button type="submit" name="submit">Radar 2</button>
</form>
<iframe id="the-frame2" width="347" height="282" src=""></iframe>
<script type="text/javascript">
(function () {
"use strict";
var url_setter = document.getElementById('url-setter2'), url = document.getElementById('url2'), the_iframe = document.getElementById('the-frame2');
url_setter.onsubmit = function (event) {
event.preventDefault();
the_iframe.src = url2.value;
};
}());
</script>
<form method="post" target="imgChart2">
<input type="submit" value="Chart 2" />
<input type="text" id="ChartBar2" name="ChartBar2" style="width: 286px;"><br>
</form>
<img src="https://www.futebolnaveia.com.br/wp-content/uploads/2020/06/betfair-app.png" name="Chart 2">
</div>
<div class="column right">
<form action="" method="post" id="url-setter3">
<input type="text" name="url3" id="url3" />
<button type="submit" name="submit">Radar 3</button>
</form>
<iframe id="the-frame3" width="347" height="282" src=""></iframe>
<script type="text/javascript">
(function () {
"use strict";
var url_setter = document.getElementById('url-setter3'), url = document.getElementById('url3'), the_iframe = document.getElementById('the-frame3');
url_setter.onsubmit = function (event) {
event.preventDefault();
the_iframe.src = url3.value;
};
}());
</script>
<form method="post" target="imgChart3">
<input type="submit" value="Chart 3" />
<input type="text" id="ChartBar3" name="ChartBar3" style="width: 286px;"><br>
</form>
<img src="https://www.futebolnaveia.com.br/wp-content/uploads/2020/06/betfair-app.png" name="Chart 3">
</div>
</div>
</body>
</html>
What you're looking for is setInterval() which will run continuously until it is canceled with clearInterval(). Rather than body onload, use the window.addEventListener method. It helps separate logic from presentation and is best practices.
let intervalID
window.addEventListener('DOMContentLoaded', () => {
intervalID = setInterval(refreshIt, 500); // refresh every 0.5 secs
})
function refreshIt() {
if (!document.images) return;
// if want to stop the interval from repeating
// if (!document.images) clearInterval(intervalID)
document.images['Chart 1'].src = "https://xtsd.betfair.com/LoadRunnerInfoChartAction/?marketId=185109994&selectionId=1485567";
document.images['Chart 2'].src = "https://xtsd.betfair.com/LoadRunnerInfoChartAction/?marketId=185191931&selectionId=1222344";
document.images['Chart 3'].src = "https://xtsd.betfair.com/LoadRunnerInfoChartAction/?marketId=185192198&selectionId=47972";
}
Related
When I click the button:
<button class="button" style="width: 352px;" onclick="limpartexto1()">Limpar Texto 1</button>
Circled in red, in theory it should clear the texts written in the text bars and press the Radar 1 button. However, when I click on the button, nothing happens.
Error indicated in dev tools by Google Chrome:
I'd like some help figuring out why this is happening, I can't find the error.
<div class="column left">
<form action="" method="post" id="url-setter1">
<button class="button" id="botaoradar1" onclick="radarzinho1()">Radar 1</button>
<input type="text" name="url1" id="url1" style="width: 283px;" />
<iframe id="the-frame1" width="347" height="282" src=""></iframe>
<p></p>
<script type="text/javascript">
(function radarzinho1() {
"use strict";
var url_setter = document.getElementById('url-setter1'), url = document.getElementById('url1'), the_iframe = document.getElementById('the-frame1');
url_setter.onsubmit = function (event) {
try {
let link = document.getElementById("url1").value;
let value1 = link.split("OB_EV")[1];
value1 = value1.split("/")[0];
event.preventDefault();
the_iframe.src = "https://sports.staticcache.org/scoreboards/scoreboards-football/index.html?eventId=" + value1;
} catch (e) {
event.preventDefault();
the_iframe.src = "https://image.flaticon.com/icons/png/128/26/26547.png";
}
};
}());
</script>
<form method="post" target="imgChart1">
<input class="button" type="submit" value="Chart 1" />
<input type="text" id="ChartBar1" name="ChartBar1" style="width: 285px;"><br>
<img src="https://sitedeapostas-com.imgix.net/assets/local/Company/logos/betfair_logo_transp.png?auto=compress%2Cformat&fit=clip&q=75&w=263&s=c1691b4034fd0c4526d27ffe8b1e839c" name="Chart 1"/>
<p></p>
<form action="" method="post" id="ClearText1">
<button class="button" style="width: 352px;" onclick="limpartexto1()">Limpar Texto 1</button>
</form>
<script type="text/javascript">
function limpartexto1() {
var btn = document.getElementById('ClearText1');
btn.onclick = function(e){
e.preventDefault();
document.getElementById('ChartBar1').value="";
document.getElementById('url1').value="";
document.getElementById('botaoradar1').click();};
}
</script>
</div>
Note: I'll leave the complete project script to make it easier for anyone who can help me:
<html>
<head>
<style>
{
box-sizing: border-box;
}
.column {
float: left;
width: 355;
}
.left {
}
.middle {
}
.middle2 {
}
.right {
}
.row:after {
content: "";
display: table;
clear: both;
}
.button {
background-color: #33ccff;
color: black;
font-weight: bold;
}
body {
overflow: hidden;
}
</style>
<script>
if ( window.history.replaceState ) {
window.history.replaceState( null, null, window.location.href );
}
</script>
<script language="JavaScript">
let intervalID
window.addEventListener('DOMContentLoaded', () => {
intervalID = setInterval(refreshIt, 500); // refresh every 0.5 secs
})
function refreshIt() {
if (!document.images) return;
// if want to stop the interval from repeating
// if (!document.images) clearInterval(intervalID)
document.images['Chart 1'].src = ChartBar1.value;
document.images['Chart 2'].src = ChartBar2.value;
document.images['Chart 3'].src = ChartBar3.value;
document.images['Chart 4'].src = ChartBar4.value;
}
</script>
</head>
<body style="background-color:black;">
<div class="row">
<div class="column left">
<form action="" method="post" id="url-setter1">
<button class="button" id="botaoradar1" onclick="radarzinho1()">Radar 1</button>
<input type="text" name="url1" id="url1" style="width: 283px;" />
<iframe id="the-frame1" width="347" height="282" src=""></iframe>
<p></p>
<script type="text/javascript">
(function radarzinho1() {
"use strict";
var url_setter = document.getElementById('url-setter1'), url = document.getElementById('url1'), the_iframe = document.getElementById('the-frame1');
url_setter.onsubmit = function (event) {
try {
let link = document.getElementById("url1").value;
let value1 = link.split("OB_EV")[1];
value1 = value1.split("/")[0];
event.preventDefault();
the_iframe.src = "https://sports.staticcache.org/scoreboards/scoreboards-football/index.html?eventId=" + value1;
} catch (e) {
event.preventDefault();
the_iframe.src = "https://image.flaticon.com/icons/png/128/26/26547.png";
}
};
}());
</script>
<form method="post" target="imgChart1">
<input class="button" type="submit" value="Chart 1" />
<input type="text" id="ChartBar1" name="ChartBar1" style="width: 285px;"><br>
<img src="https://sitedeapostas-com.imgix.net/assets/local/Company/logos/betfair_logo_transp.png?auto=compress%2Cformat&fit=clip&q=75&w=263&s=c1691b4034fd0c4526d27ffe8b1e839c" name="Chart 1"/>
<p></p>
<form action="" method="post" id="ClearText1">
<button class="button" style="width: 352px;" onclick="limpartexto1()">Limpar Texto 1</button>
</form>
<script type="text/javascript">
function limpartexto1() {
var btn = document.getElementById('ClearText1');
btn.onclick = function(e){
e.preventDefault();
document.getElementById('ChartBar1').value="";
document.getElementById('url1').value="";
document.getElementById('botaoradar1').click();};
}
</script>
</div>
<div class="column middle">
<form action="" method="post" id="url-setter2">
<button class="button" id="botaoradar2" onclick="radarzinho2()">Radar 2</button>
<input type="text" name="url2" id="url2" style="width: 283px;" />
<iframe id="the-frame2" width="347" height="282" src=""></iframe>
<p></p>
<script type="text/javascript">
(function radarzinho2() {
"use strict";
var url_setter = document.getElementById('url-setter2'), url = document.getElementById('url2'), the_iframe = document.getElementById('the-frame2');
url_setter.onsubmit = function (event) {
try {
let link = document.getElementById("url2").value;
let value2 = link.split("OB_EV")[1];
value2 = value2.split("/")[0];
event.preventDefault();
the_iframe.src = "https://sports.staticcache.org/scoreboards/scoreboards-football/index.html?eventId=" + value2;
} catch (e) {
event.preventDefault();
the_iframe.src = "https://image.flaticon.com/icons/png/128/26/26547.png";
}
};
}());
</script>
<form method="post" target="imgChart2">
<input class="button" type="submit" value="Chart 2" />
<input type="text" id="ChartBar2" name="ChartBar2" style="width: 285px;"><br>
<img src="https://sitedeapostas-com.imgix.net/assets/local/Company/logos/betfair_logo_transp.png?auto=compress%2Cformat&fit=clip&q=75&w=263&s=c1691b4034fd0c4526d27ffe8b1e839c" name="Chart 2"/>
<p></p>
<form action="" method="post" id="ClearText2">
<button class="button" style="width: 352px;" onclick="limpartexto2()">Limpar Texto 2</button>
</form>
<script type="text/javascript">
function limpartexto2() {
var btn = document.getElementById('ClearText2');
btn.onclick = function(e){
e.preventDefault();
document.getElementById('ChartBar2').value="";
document.getElementById('url2').value="";
document.getElementById('botaoradar2').click();};
}
</script>
</div>
<div class="column middle2">
<form action="" method="post" id="url-setter3">
<button class="button" id="botaoradar3" onclick="radarzinho3()">Radar 3</button>
<input type="text" name="url3" id="url3" style="width: 283px;" />
<iframe id="the-frame3" width="347" height="282" src=""></iframe>
<p></p>
<script type="text/javascript">
(function radarzinho3() {
"use strict";
var url_setter = document.getElementById('url-setter3'), url = document.getElementById('url3'), the_iframe = document.getElementById('the-frame3');
url_setter.onsubmit = function (event) {
try {
let link = document.getElementById("url3").value;
let value3 = link.split("OB_EV")[1];
value3 = value3.split("/")[0];
event.preventDefault();
the_iframe.src = "https://sports.staticcache.org/scoreboards/scoreboards-football/index.html?eventId=" + value3;
} catch (e) {
event.preventDefault();
the_iframe.src = "https://image.flaticon.com/icons/png/128/26/26547.png";
}
};
}());
</script>
<form method="post" target="imgChart3">
<input class="button" type="submit" value="Chart 3" />
<input type="text" id="ChartBar3" name="ChartBar3" style="width: 285px;"><br>
<img src="https://sitedeapostas-com.imgix.net/assets/local/Company/logos/betfair_logo_transp.png?auto=compress%2Cformat&fit=clip&q=75&w=263&s=c1691b4034fd0c4526d27ffe8b1e839c" name="Chart 3"/>
<p></p>
<form action="" method="post" id="ClearText3">
<button class="button" style="width: 352px;" onclick="limpartexto3()">Limpar Texto 3</button>
</form>
<script type="text/javascript">
function limpartexto3() {
var btn = document.getElementById('ClearText3');
btn.onclick = function(e){
e.preventDefault();
document.getElementById('ChartBar3').value="";
document.getElementById('url3').value="";
document.getElementById('botaoradar3').click();};
}
</script>
</div>
<div class="column right">
<form action="" method="post" id="url-setter4">
<button class="button" id="botaoradar4" onclick="radarzinho4()">Radar 4</button>
<input type="text" name="url4" id="url4" style="width: 283px;" />
<iframe id="the-frame4" width="347" height="282" src=""></iframe>
<p></p>
<script type="text/javascript">
(function radarzinho4() {
"use strict";
var url_setter = document.getElementById('url-setter4'), url = document.getElementById('url4'), the_iframe = document.getElementById('the-frame4');
url_setter.onsubmit = function (event) {
try {
let link = document.getElementById("url4").value;
let value4 = link.split("OB_EV")[1];
value4 = value4.split("/")[0];
event.preventDefault();
the_iframe.src = "https://sports.staticcache.org/scoreboards/scoreboards-football/index.html?eventId=" + value4;
} catch (e) {
event.preventDefault();
the_iframe.src = "https://image.flaticon.com/icons/png/128/26/26547.png";
}
};
}());
</script>
<form method="post" target="imgChart4">
<input class="button" type="submit" value="Chart 4" />
<input type="text" id="ChartBar4" name="ChartBar4" style="width: 285px;"><br>
<img src="https://sitedeapostas-com.imgix.net/assets/local/Company/logos/betfair_logo_transp.png?auto=compress%2Cformat&fit=clip&q=75&w=263&s=c1691b4034fd0c4526d27ffe8b1e839c" name="Chart 4"/>
<p></p>
<form action="" method="post" id="ClearText4">
<button class="button" style="width: 352px;" onclick="limpartexto4()">Limpar Texto 4</button>
</form>
<script type="text/javascript">
function limpartexto4() {
var btn = document.getElementById('ClearText4');
btn.onclick = function(e){
e.preventDefault();
document.getElementById('ChartBar4').value="";
document.getElementById('url4').value="";
document.getElementById('botaoradar4').click();};
}
</script>
</div>
</div>
</body>
</html>
Try changing this function code:
function limpartexto3() {
document.getElementById('ChartBar3').value="";
document.getElementById('url3').value="";
document.getElementById('botaoradar3').click();};
}
Instead of attaching one more event handler you should simply call your actions on click of this button.
One more observation is the use of IIFE. These functions are created in a separate scope and you cannot use them as your event handlers.
Use this:
function radarzinho1() {
"use strict";
var url_setter = document.getElementById('url-setter1'), url = document.getElementById('url1'), the_iframe = document.getElementById('the-frame1');
url_setter.onsubmit = function (event) {
try {
let link = document.getElementById("url1").value;
let value1 = link.split("OB_EV")[1];
value1 = value1.split("/")[0];
event.preventDefault();
the_iframe.src = "https://sports.staticcache.org/scoreboards/scoreboards-football/index.html?eventId=" + value1;
} catch (e) {
event.preventDefault();
the_iframe.src = "https://image.flaticon.com/icons/png/128/26/26547.png";
}
};
}
Suggest you to start small and then add these complex functionalities.
Codepen
Today I am going to use JavaScript to do a validation of the registration page, but after an afternoon of verification, the function can be called. When the test pop-up window is added at the beginning of the function, the pop-up window pops up correctly, but the verification function in the function is always unresponsive. Ask for the forum's amnesty, where is the problem, thank you! ! !
I added a test popup statement to the script and it succeeded. But other functions don't respond.
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册界面</title>
<link rel="stylesheet" type="text/css" href="css/register.css">
<script type="text/javascript">
window.alert("test");
function checkRegisterINfo(form) {
/*判断姓名格式是否正确*/
var RegisterNameCheck = document.getElementById("nameId").value;
if (RegisterNameCheck = "") {
window.alert("姓名不能为空！");
return false;
} else {
var rightName = /[\u4E00-\u9FA5]{2,16}/;
if (rigntName.test(RegisterNameCheck) == true) {} else {
window.alert("您输入的姓名不正确！");
return false;
}
}
/*判断密码是否规范*/
var RegisterPwdCheck = document.getElementById("pwdId").value;
var rightPwd = /^(\w){6,20}$/;
if (rightPwd.test(RegisterPwdCheck) == false) {
window.alert("密码只能输入6-20个字母、数字、下划线");
return false;
}
/*判断密保问题格式是否正确*/
var RegisterQuestionCheck = document.getElementById("questionId").value;
var rightQuestion = /[\u4E00-\u9FA5]{1,16}/;
if (!rightQuestion.test(RegisterQuestionCheck)) {
window.alert("密保问题支持1-16位汉字！");
return false;
}
/*判断密保答案格式是否正确*/
var RegisterAnswerCheck = document.getElementById("answerId").value;
var rightAnswer = /[\u4E00-\u9FA5]{1,50}/;
if (!rightAnswer.test(RegisterAnswerCheck)) {
window.alert("密保答案支持1-50位汉字！");
return false;
}
}
</script>
</head>
<body>
<div class="main">
<div class="title">
<span>用户注册</span>
</div>
<form name="registerForm" method="post" action="" onsubmit="return checkRegisterINfo(registerForm)">
<!--输入框-->
<div class="input-content">
<div>
<input type="text" autocomplete="off" id="nameId" placeholder="用户名" name="Registerusername" required/>
</div>
<div style="margin-top: 16px">
<input type="password" autocomplete="off" id="pwdId" placeholder="登录密码" name="Registerpassword" required maxlength="32" />
</div>
<div style="margin-top: 16px">
<input type="text" autocomplete="off" id="questionId" placeholder="密保问题" name="Registerquestion" required maxlength="32" />
</div>
<div style="margin-top: 16px">
<input type="text" autocomplete="off" id="answerId" placeholder="密保答案" name="Registeranswer" required maxlength="32" />
</div>
</div>
<!--登入按钮-->
<div style="margin-top: 105px">
<button type="submit" class="enter-btn">登录</button>
</div>
<div class="foor">
<div class="left"><span>忘记密码</span></div>
<div class="right"><span>用户登录</span></div>
</div>
</form>
</div>
</body>
</html>
I want my popup to show only once per visit. What am I doing wrong? It shows every time I refresh the browser.
This is what I've got.
<body onload="myFunction()">
<!-- Modal -->
<div id="ac-wrapper" style='display:none'>
<div id="popup">
<center>
<h3>DISCLAIMER</h3>
<input type="submit" name="submit" value="I AGREE" onClick="PopUp('hide')" id="button" />
</center>
</div>
</div>
<script>
var cookie = localStorage.getItem('myPopup');
if (!cookie) {
function PopUp(hideOrshow) {
if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none";
else document.getElementById('ac-wrapper').removeAttribute('style');
}
window.onload = function() {
setTimeout(function() {
PopUp('show');
}, 1000);
}
localStorage.setItem('myPopup', 'true');
}
</script>
</body>
Move the If(!cookie) inside window.onload function
<body >
<!-- Modal -->
<div id="ac-wrapper" style='display:none'>
<div id="popup">
<center>
<h3>DISCLAIMER</h3>
<input type="submit" name="submit" value="I AGREE" onClick="PopUp('hide')" id="button" />
</center>
</div>
</div>
<script>
var cookie = localStorage.getItem('myPopup');
function PopUp(hideOrshow) {
if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none";
else document.getElementById('ac-wrapper').removeAttribute('style');
}
window.onload = function () {
if(!cookie){
setTimeout(function() {
PopUp('show');
}, 1000); }
}
localStorage.setItem('myPopup','true');
</script>
</body>
Basically I have a form that needs to be submitted in order that the next section of the site appears, in this case it's when a video plays through and ends, the values are submitted via POST so i can't just have a hardcoded URL as i could if i used GET ie. thecycle.ie/test02.php?click='SCENE 09'. The EventListener works but i just can't get it to submit the form.
function listen(evnt, elem, func)
{
if (elem.addEventListener)
elem.addEventListener(evnt, func, false);
else if (elem.attachEvent)
{
var r = elem.attachEvent("on" + evnt, func);
return r;
}
else window.alert("I'm sorry, I'm afraid I can't do that.");
}
listen("ended", document.getElementById("bgvid"), changePage);
function changePage() {
document.getElementById('formID').submit(); // SUBMIT FORM
}
Below is the full page
<form name="formID" id="formID" method="post" action="test02.php">
<input type="hidden" id="bgstate" name="bgstate" value="1">
<input type="hidden" id="vostate" name="vostate" value="">
<input type="hidden" id="choice" name="choice" value="0">
<script type="text/javascript">
$(document).ready(function() {
var bgAudio = document.getElementById("background_audio");
if(bgAudio) {
bgAudio.volume = 1.0;
bgAudio.play();
}
});
</script>
<script type="text/javascript">
function PlayBG()
{
document.getElementById("bgstate").value = "0";
var bgAudio = document.getElementById("background_audio");
bgAudio.volume = 1.0;
bgAudio.play();
}
function StopBG()
{
document.getElementById("bgstate").value = "1";
var bgAudio = document.getElementById("background_audio");
bgAudio.volume = 0.0;
bgAudio.pause();
bgAudio.currentTime = 0;
}
</script>
<div id="timeline">
<!-- top point of ogham -->
<img src="img/timeline/timeline_start.png" width="31" height="31" id="timeline_01"><br>
<input name="click" id="timelineButton" type="image" value="SCENE 01" src="img/timeline/timeline_A.png" alt="navigation" onmouseover="javascript:this.src='img/timeline/timeline_A_on.png'" onmouseout="javascript:this.src='img/timeline/timeline_A.png'">
<input name="click" id="timelineButton" type="image" value="SCENE 02" src="img/timeline/timeline_C.png" alt="navigation" onmouseover="javascript:this.src='img/timeline/timeline_C_on.png'" onmouseout="javascript:this.src='img/timeline/timeline_C.png'">
<input name="click" id="timelineButton" type="image" value="SCENE 03" src="img/timeline/timeline_D_on.png" alt="navigation" onmouseover="javascript:this.src='img/timeline/timeline_D_on.png'" onmouseout="javascript:this.src='img/timeline/timeline_D_on.png'">
<!-- bottom point of ogham -->
<img src="img/timeline/timeline_end.png" alt="timeline"><br>
</div>
<div id="banner">
<img src="img/smalllogo.png" alt="the cycle">
<div class="menu">
<ul>
<li>
Home
</li>
<li>
Wiki
</li>
<li>
About
</li>
</ul>
</div>
<div id="music">
<img src="img/music.png" alt="music">
<input type="image" src="img/play.png" alt="play" onclick="PlayBG(); return false;" value="Play" onmouseover="javascript:this.src='img/play_on.png'" onmouseout="javascript:this.src='img/play.png'">
<input type="image" src="img/stop.png" alt="stop" onclick="StopBG(); return false;" value="Stop" onmouseover="javascript:this.src='img/stop_on.png'" onmouseout="javascript:this.src='img/stop.png'">
</div>
</div>
<script type="text/javascript">
function PlayVO18()
{
document.getElementById("vostate").value = "0";
var voAudio = document.getElementById("voiceover_audio18");
var bgAudio = document.getElementById("background_audio");
var oldBGVolume = bgAudio.volume;
voAudio.volume = 1.0;
voAudio.play();
}
function StopVO18()
{
document.getElementById("vostate").value = "1";
var voAudio = document.getElementById("voiceover_audio18");
voAudio.volume = 0.0;
voAudio.pause();
voAudio.currentTime = 0;
}
</script>
<audio id="voiceover_audio18" class="voiceover_audio" src="audio/vo_balor_07.mp3"></audio>
<audio id="background_audio" class="background_audio" src="audio/myth_cycle_01.mp3" loop=""></audio>
<video autoplay="" poster="img/balorlugh_01.jpg" id="bgvid">
<source src="vids/balorlugh_01.webm" type="video/webm">
<source src="vids/balorlugh_01.mp4" type="video/mp4">
</video>
<div id="decision">
<div class="container">
<div class="toggle18">
<h2>Balor<input type="image" src="img/speech.png" alt="play" onclick="PlayVO18(); return false;" value="Play" onmouseover="javascript:this.src='img/speech_on.png'" onmouseout="javascript:this.src='img/speech.png'"></h2>
<p>You have made a grave mistake, my friend. We will have your hand in the end, even if it takes a few lashings to strengthen your resolve... what is that?</p>
<br>
<div class="toggle">
<script type="text/javascript">
function listen(evnt, elem, func)
{
if (elem.addEventListener)
elem.addEventListener(evnt, func, false);
else if (elem.attachEvent)
{
var r = elem.attachEvent("on" + evnt, func);
return r;
}
else window.alert("I'm sorry, I'm afraid I can't do that.");
}
listen("ended", document.getElementById("bgvid"), changePage);
function changePage()
{
document.getElementById('formID').submit(); // SUBMIT FORM
}
</script>
<button type="submit" name="click" id="submit" class="buttons" value="SCENE 09">Skip</button>
<input type="hidden" id="submit" name="bgstate" value="SCENE 09">
</div>
</div>
</div>
</div>
<script type="text/javascript">
var menu_elements = document.querySelectorAll('.toggle'),
menu_length = menu_elements.length;
for (var i = 0; i < menu_length; i++)
{
menu_elements[i].addEventListener('click', function (e)
{
var target = document.querySelector('.container>.' + e.target.classList[0]); // clicked element
Array.prototype.filter.call(target.parentNode.children, function (siblings)
{
siblings.style.display = 'none'; // hide sibling elements
});
target.style.display = 'block'; // show clicked element
});
}
function MakeChoice08()
{
document.getElementById("choice").value = "08";
}
function MakeChoice04()
{
document.getElementById("choice").value = "04";
}
</script>
</form>
You can`t use "submit" in NAME or ID attribute along with the submit() method, as it will be confused between what it considers an object referenced by the name or id and the method.
Just change <button type="submit" name="click" id="submit" class="buttons" value="SCENE 09">Skip</button> to
<button type="submit" name="click" id="somethingelse" class="buttons" value="SCENE 09">Skip</button>
and <input type="hidden" id="submit" name="bgstate" value="SCENE 09"> to
<input type="hidden" id="somethingelse2" name="bgstate" value="SCENE 09">
So I made a simple javascript form validator which creates a box with the error message using DOM. But I can't figure out a way how to reset all these changes when i reset the form using
<button type="reset">
I would like to know how it's done please.
Thanks.
The Code
<html>
<head>
<script type="text/javascript">
function validate(){
var fname = document.getElementById("fname");
var surname = document.getElementById("surname");
if(fname.value === "" || fname.value === null){
document.getElementById("sbody").style.display = "block";
document.getElementById("fname").style.display = "block";
return false;
}
//Verify Last Name
if(surname.value === "" || surname.value === null){
document.getElementById("sbody").style.display = "block";
document.getElementById("surname").style.display = "block";
return false;
}
}//End Validate Function
</script>
<style type="text/css">
#sbody{
width: 100px;
height: 100px;
background-color: #f3f3f3;
display:none;
}
.vis{
display: none;
font-size: 12px;
}
</style>
</head>
<body>
<section id="sbody">
<span id="fner" class="vis">First Name is missing.</span>
<span id="lner" class="vis">Surame is missing.</span>
</section>
<form id="registerForm" method="POST" action="register.php" onsubmit="return validate()">
<label for="fname" class="labelStyle">First Name: </label>
<input id="fname" name="fname" type="text" value="">
<label for="surname" class="labelStyle">Surname: </label>
<input id="surname" name="surname" type="text" value="">
<button type="submit">Sign Up</button>
<button type="reset">Reset</button>
</form>
</body>
</html>
The browser cannot magically figure out what has to be done to reset the custom changes.
However you can listen to the reset event of the form using element.addEventListener.
DEMO
HTML
<form id="test">
<div id="errors-ct">The form has errors</div>
<button type="reset">Reset</button>
</form>
JS
//wait for the DOM to be ready
document.addEventListener('DOMContentLoaded', function () {
//store a reference to the errors container div
var errorsCt = document.getElementById('errors-ct');
//listen to the reset event of the form
document.getElementById('test').addEventListener('reset', function (e) {
var form = e.target; //this is how you could access the form
//hide the errors container
errorsCt.style.display = 'none';
});
});
If you want to reset the form, as if user hadn't made any selections or added any input, then just set all form element values to their default value, or empty.
jsFiddle
<div>
<form action="/echo/html" method="get">
<input type="text" placeholder="username" />
<br/>
<input type="password" placeholder="password" />
<br/>
<input type="checkbox" value="test" data-default="checked" checked="checked"/>
<br/>
<button type="reset" value="reset" onclick="resetForm()">reset</button>
<br/>
</form>
<div id="err">Some error message</div>
</div>
window.resetForm = function () {
var fields = $('input'),
uname, pass, check;
uname = $(fields.get(0));
pass = $(fields.get(1));
check = $(fields.get(2));
$("#err").text("");
uname.val('');
pass.val('');
if (check.attr("data-default") == "checked") {
check.attr("checked", "checked");
} else {
check.removeAttr("checked");
}
}