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
Related
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";
}
I create an HTML form with Admin Button and in the .js file I wrote a click Event in Admin Button to change from:
style='display:none'
to:
style='display:block'
but it's not working. Why?
var adminMode = {
init: function() {
this.adminButton = document.getElementById('admin-button');
this.adminForm = document.getElementById('admin-form');// form ID
this.allForm = document.getElementById('all-form'); //div ID
this.adminButton.addEventListener('click', function (allForm) {
this.adminForm.style.display = 'inline'
});
},
HTML
<button id='admin-button'>Admin</button> <br><br>
<div id='all-form'>
<form id='admin-form' style='display:none'>
Name:<br>
<input type="text" name="firstname" value=" "> <br><br>
Img URL:<br>
<input type="text" name="lastname" value=" "> <br><br>
<button> Save</button>
<button>Cancel</button>
</form>
</div>
var adminMode = { init: function() {
this.adminButton = document.getElementById('admin-button');
//this.adminForm = document.getElementById('admin-form');// form ID
//this.allForm = document.getElementById('all-form'); //div ID
this.adminButton.addEventListener('click', function (event) {
document.getElementById('admin-form').style.display = 'inline'
});
},
That what you mean
init: function() {
document.getElementById('admin-button').addEventListener('click', function () {
document.getElementById('allForm').style.display = 'block';
});
}
OR admin-form
init: function() {
document.getElementById('admin-button').addEventListener('click', function () {
document.getElementById('admin-form').style.display = 'block';
});
}
If you write function() the this is not known....
For your Edit: put the function in script no init()
function dispaly(){
document.getElementById('admin-form').style.display = 'block';
}
<button id='admin-button' onclick="dispaly()">Admin</button> <br><br>
<div id='all-form'>
<form id='admin-form' style='display:none'>
Name:<br>
<input type="text" name="firstname" value=" "> <br><br>
Img URL:<br>
<input type="text" name="lastname" value=" "> <br><br>
<button> Save</button>
<button>Cancel</button>
</form>
</div>
Every time I click the + button I want the same input to display
The way I do it here works fine but seems like the worst way of doing it as just repeating the same code and changing the id's (also if I want for example 5 inputs I would have to repeat this code 5 times). What would be a better way of doing this?
<html>
<head>
<script language='JavaScript' type='text/javascript'>
function show3(){
document.getElementById('div2').style.display = 'block';
}
</script>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<div>
<input type="range" min="0" max="1500" value="0" class="slider2" id="one"/>
<p>Value(mm): <input type="text" id="two" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
<script>
var slider1 = document.getElementById("one");
var output2 = document.getElementById("two");
output2.value = slider1.value;
slider1.oninput = function() {
output2.value = this.value;
}
</script>
<div id="div2" class="hide">
<input type="range" min="0" max="1500" value="0" class="slider2" id="three"/>
<p>Value(mm): <input type="text" id="four" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
<script>
var slider2 = document.getElementById("three");
var output3 = document.getElementById("four");
output2.value = slider1.value;
slider2.oninput = function() {
output3.value = this.value;
}
</script>
</body>
</html>
<html>
<head>
<script language='JavaScript' type='text/javascript'>
function show3(){
document.getElementById('div2').style.display = 'block';
}
</script>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<div>
<input type="range" min="0" max="1500" value="0" class="slider2" id="one"/>
<p>Value(mm): <input type="text" id="two" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
<script>
var slider1 = document.getElementById("one");
var output2 = document.getElementById("two");
output2.value = slider1.value;
slider1.oninput = function() {
output2.value = this.value;
}
</script>
<div id="div2" class="hide">
<input type="range" min="0" max="1500" value="0" class="slider2" id="three"/>
<p>Value(mm): <input type="text" id="four" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
<script>
var slider2 = document.getElementById("three");
var output3 = document.getElementById("four");
output2.value = slider1.value;
slider2.oninput = function() {
output3.value = this.value;
}
</script>
</body>
</html>
This will work for all the sliders. But you need to keep in mind a couple of things :
This will work only for the sliders that are already rendered in the DOM (even if they are hidden) if you render new sliders to the DOM you will need to attach the event listener as I did it in the foreach loop.
The input id (e.g "one") needs to match the output data-range="one"
function show3(){
document.getElementById('div2').style.display = 'block';
}
var sliders = document.querySelectorAll(".slider"); // slider = common class name
sliders.forEach(( slider ) => {
slider.addEventListener('input', (e) => {
const sliderId = e.target.id;
const output = document.querySelector(`[data-range=${sliderId}]`);
output.value = e.target.value;
});
});
<html>
<head>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<div>
<input type="range" min="0" max="1500" value="0" class="slider" id="one"/>
<p>Value(mm): <input type="text" data-range="one" id="two" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
<div id="div2" class="hide">
<input type="range" min="0" max="1500" value="0" class="slider" id="two"/>
<p>Value(mm): <input type="text" data-range="two" id="four" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
</body>
</html>
Might be easier to include the code in the element and clone it (parentNode is the div) :
<div>
<input type="range" min="0" max="1500" value="0"
oninput="this.parentNode.getElementsByTagName('INPUT')[1].value = this.value"/>
<p>Value(mm): <input type="text" size="10" /></p>
<button type="button"
onclick="this.parentNode.parentNode.append(this.parentNode.cloneNode(true))">+</button>
</div>
I would recommend you to create some kind of class which let you create slider components dynamically.
Here's a quick example (not optimized):
var SliderComponent = (function(doc) {
var defaults = {
containerSelector: 'body',
value: 0,
min: 0,
max: 1500,
inputSize: 10,
inputClass: 'special',
sliderClass: 'slider',
buttonClass: 'button'
}, options;
function SliderComponent(options) {
options = Object.assign({}, defaults, options || {});
this.container = getContainer(options);
this.input = createInput(options);
this.slider = createSlider(options);
this.removeButton = createButton(options.buttonClass, '-');
this.addButton = createButton(options.buttonClass, '+');
this.element = render.apply(this);
this.events = [];
this.events.push(
addEventListener.call(this, 'click', this.removeButton, function() {
this.destroy();
}),
addEventListener.call(this, 'click', this.addButton, function() {
new SliderComponent(options);
}),
addEventListener.call(this, 'input', this.slider, function(event) {
this.input.value = event.target.value;
}),
addEventListener.call(this, 'input', this.input, function(event) {
this.slider.value = event.target.value;
})
)
}
SliderComponent.prototype.destroy = function() {
this.events.forEach(function(e) {
e();
});
this.element.remove();
}
function addEventListener(name, element, listener) {
listener = listener.bind(this);
element.addEventListener(name, listener);
return function() {
element.removeEventListener(name, listener);
};
}
function getContainer(options) {
var container = doc.querySelector(options.containerSelector);
if(!container) {
throw new Error('Container for selector %s not found', options.containerSelector);
}
return container;
}
function createInput(options) {
var input = doc.createElement('input');
input.setAttribute('type', 'number');
input.setAttribute('min', options.min);
input.setAttribute('max', options.max);
input.setAttribute('size', options.inputSize);
input.classList.add(options.inputClass);
input.value = options.value;
return input;
}
function createSlider(options) {
var input = doc.createElement('input');
input.setAttribute('type', 'range');
input.setAttribute('min', options.min);
input.setAttribute('max', options.max);
input.classList.add(options.sliderClass);
input.value = options.value;
return input;
}
function createButton(klass, text) {
var button = doc.createElement('button');
button.setAttribute('type', 'button');
button.classList.add(klass);
button.textContent = text;
return button;
}
function render() {
var element = doc.createElement('div');
element.appendChild(this.slider);
element.appendChild(this.input);
element.appendChild(this.removeButton);
element.appendChild(this.addButton);
return this.container.appendChild(element);
}
return SliderComponent;
})(document);
var sliders = new SliderComponent();
I have this simple code, and i can't understand why it is not working.
<div>
<input type="button" class="button" value="Add A Site" onclick="Div();" />
</div>
<script type="text/javascript">
function Div() {
var E = document.getElementsByClassName('Form');
if (E.style.display == 'none') {
E.style.display = 'block';
this.value = "Close";
} else {
S.style.display = 'none';
this.value = "Add A Site";
}
}
</script>
<div class="Form" style="display:none;">
<h1>Example</h1>
</div>
user Form which you are trying to access is inside div.form so you have to access that like below....I tested this, its working. the content in Form is displaying
<input type="button" class="button" value="Add A Site" onclick="Div();" />
<script type="text/javascript">
function Div() {
var E= document.getElementsByClassName('Form')[0];
if (E.style.display=='none'){
E.style.display='block';
this.value="Close";
}else {
S.style.display='none';
this.value="Add A Site";
}
}
</script>
<div class="Form" style="display:none;">
<h1>Example</h1></div>
<script>
function Div() {
var E = document.getElementsByClassName('Form')[0];
if (E.style.display==='none') {
E.style.display='block';
this.value=Close;
} else {
E.style.display = 'none';
this.value = 'Add A Site';
}
}
</script>
<input type="button" class="button" value="Add A Site" onclick="Div()" />
<div class="Form" style="display:none;">
<h1>Example</h1>
</div>
This should work for you.
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">