show iframe when press html button does not work - javascript
0
I'm trying to show an iframe only when I click a button using javascript, but it's not working and I have no idea why.
//I tried this way. did not work.
document.querySelector(".buttonweek").addEventListener('click', function() {ThisWeek();});
function ThisWeek(){
document.querySelector("#week").style.display = "block";
}
//then I tried that way. did not work.
document.getElementById("idweek").addEventListener('click', function() {ThisWeek();});
function ThisWeek(){
document.getElementById("week").style.display = "block";
}iframe{
display:none;
width: 1280px;
height: 1000px;
}<ul>
<li><button type="button" class="buttonweek" id="idweek">Hot This Week</button></li>
<iframe src="thisweek.php" id="week"></iframe>
</ul>I also tried to use the onclick in the obstrusive way, it also did not work !!
If anyone has read this, thank you!
javascript html css
edited Nov 13 '18 at 16:36
Oram
684216
asked Nov 13 '18 at 15:58
KerolaineKerolaine
82
add a comment |
0
I'm trying to show an iframe only when I click a button using javascript, but it's not working and I have no idea why.
//I tried this way. did not work.
document.querySelector(".buttonweek").addEventListener('click', function() {ThisWeek();});
function ThisWeek(){
document.querySelector("#week").style.display = "block";
}
//then I tried that way. did not work.
document.getElementById("idweek").addEventListener('click', function() {ThisWeek();});
function ThisWeek(){
document.getElementById("week").style.display = "block";
}iframe{
display:none;
width: 1280px;
height: 1000px;
}<ul>
<li><button type="button" class="buttonweek" id="idweek">Hot This Week</button></li>
<iframe src="thisweek.php" id="week"></iframe>
</ul>I also tried to use the onclick in the obstrusive way, it also did not work !!
If anyone has read this, thank you!
javascript html css
edited Nov 13 '18 at 16:36
Oram
684216
asked Nov 13 '18 at 15:58
KerolaineKerolaine
82
Any errors thrown in browser console? Problem is probably related to Why does jQuery or a DOM method such as getElementById not find the element?
– charlietfl
Nov 13 '18 at 16:01
3
I've ran this code and it seems to work? Are you getting any console errors?
– Andrew1996
Nov 13 '18 at 16:02
Live demos are great, but they need to be Minimal, Complete, and Verifiable examples. It does not good to provide JS that depends on HTML and CSS without providing the HTML and CSS. It does not good to provide a demo with contains CSS and only CSS.
– Quentin
Nov 13 '18 at 16:10
add a comment |
0
0
0
I'm trying to show an iframe only when I click a button using javascript, but it's not working and I have no idea why.
//I tried this way. did not work.
document.querySelector(".buttonweek").addEventListener('click', function() {ThisWeek();});
function ThisWeek(){
document.querySelector("#week").style.display = "block";
}
//then I tried that way. did not work.
document.getElementById("idweek").addEventListener('click', function() {ThisWeek();});
function ThisWeek(){
document.getElementById("week").style.display = "block";
}iframe{
display:none;
width: 1280px;
height: 1000px;
}<ul>
<li><button type="button" class="buttonweek" id="idweek">Hot This Week</button></li>
<iframe src="thisweek.php" id="week"></iframe>
</ul>I also tried to use the onclick in the obstrusive way, it also did not work !!
If anyone has read this, thank you!
javascript html css
edited Nov 13 '18 at 16:36
Oram
684216
asked Nov 13 '18 at 15:58
KerolaineKerolaine
82
I'm trying to show an iframe only when I click a button using javascript, but it's not working and I have no idea why.
//I tried this way. did not work.
document.querySelector(".buttonweek").addEventListener('click', function() {ThisWeek();});
function ThisWeek(){
document.querySelector("#week").style.display = "block";
}
//then I tried that way. did not work.
document.getElementById("idweek").addEventListener('click', function() {ThisWeek();});
function ThisWeek(){
document.getElementById("week").style.display = "block";
}iframe{
display:none;
width: 1280px;
height: 1000px;
}<ul>
<li><button type="button" class="buttonweek" id="idweek">Hot This Week</button></li>
<iframe src="thisweek.php" id="week"></iframe>
</ul>I also tried to use the onclick in the obstrusive way, it also did not work !!
If anyone has read this, thank you!
//I tried this way. did not work.
document.querySelector(".buttonweek").addEventListener('click', function() {ThisWeek();});
function ThisWeek(){
document.querySelector("#week").style.display = "block";
}
//then I tried that way. did not work.
document.getElementById("idweek").addEventListener('click', function() {ThisWeek();});
function ThisWeek(){
document.getElementById("week").style.display = "block";
}iframe{
display:none;
width: 1280px;
height: 1000px;
}<ul>
<li><button type="button" class="buttonweek" id="idweek">Hot This Week</button></li>
<iframe src="thisweek.php" id="week"></iframe>
</ul>//I tried this way. did not work.
document.querySelector(".buttonweek").addEventListener('click', function() {ThisWeek();});
function ThisWeek(){
document.querySelector("#week").style.display = "block";
}
//then I tried that way. did not work.
document.getElementById("idweek").addEventListener('click', function() {ThisWeek();});
function ThisWeek(){
document.getElementById("week").style.display = "block";
}iframe{
display:none;
width: 1280px;
height: 1000px;
}<ul>
<li><button type="button" class="buttonweek" id="idweek">Hot This Week</button></li>
<iframe src="thisweek.php" id="week"></iframe>
</ul>javascript html css
javascript html css
edited Nov 13 '18 at 16:36
Oram
684216
asked Nov 13 '18 at 15:58
KerolaineKerolaine
82
edited Nov 13 '18 at 16:36
Oram
684216
asked Nov 13 '18 at 15:58
KerolaineKerolaine
82
edited Nov 13 '18 at 16:36
Oram
684216
edited Nov 13 '18 at 16:36
Oram
684216
edited Nov 13 '18 at 16:36
Oram
684216
684216
asked Nov 13 '18 at 15:58
KerolaineKerolaine
82
asked Nov 13 '18 at 15:58
KerolaineKerolaine
82
asked Nov 13 '18 at 15:58
KerolaineKerolaine
82
82
Any errors thrown in browser console? Problem is probably related to Why does jQuery or a DOM method such as getElementById not find the element?
– charlietfl
Nov 13 '18 at 16:01
3
I've ran this code and it seems to work? Are you getting any console errors?
– Andrew1996
Nov 13 '18 at 16:02
Live demos are great, but they need to be Minimal, Complete, and Verifiable examples. It does not good to provide JS that depends on HTML and CSS without providing the HTML and CSS. It does not good to provide a demo with contains CSS and only CSS.
– Quentin
Nov 13 '18 at 16:10
add a comment |
Any errors thrown in browser console? Problem is probably related to Why does jQuery or a DOM method such as getElementById not find the element?
– charlietfl
Nov 13 '18 at 16:01
3
I've ran this code and it seems to work? Are you getting any console errors?
– Andrew1996
Nov 13 '18 at 16:02
Live demos are great, but they need to be Minimal, Complete, and Verifiable examples. It does not good to provide JS that depends on HTML and CSS without providing the HTML and CSS. It does not good to provide a demo with contains CSS and only CSS.
– Quentin
Nov 13 '18 at 16:10
Any errors thrown in browser console? Problem is probably related to Why does jQuery or a DOM method such as getElementById not find the element?
– charlietfl
Nov 13 '18 at 16:01
Any errors thrown in browser console? Problem is probably related to Why does jQuery or a DOM method such as getElementById not find the element?
– charlietfl
Nov 13 '18 at 16:01
3
3
I've ran this code and it seems to work? Are you getting any console errors?
– Andrew1996
Nov 13 '18 at 16:02
I've ran this code and it seems to work? Are you getting any console errors?
– Andrew1996
Nov 13 '18 at 16:02
Live demos are great, but they need to be Minimal, Complete, and Verifiable examples. It does not good to provide JS that depends on HTML and CSS without providing the HTML and CSS. It does not good to provide a demo with contains CSS and only CSS.
– Quentin
Nov 13 '18 at 16:10
Live demos are great, but they need to be Minimal, Complete, and Verifiable examples. It does not good to provide JS that depends on HTML and CSS without providing the HTML and CSS. It does not good to provide a demo with contains CSS and only CSS.
– Quentin
Nov 13 '18 at 16:10
add a comment |
1 Answer
1
active
oldest
votes
-1
This should help you,
window.onload = function(){
document.getElementById("idweek").addEventListener('click', function(){
document.getElementById("week").style.display = "block";
});
}iframe{
display: none;
}<ul>
<li><button type="button" class="buttonweek" id="idweek">Hot This Week</button></li>
<iframe src="thisweek.php" id="week"></iframe>
</ul>answered Nov 13 '18 at 16:03
mbharanidharan88mbharanidharan88
4,03932454
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53284853%2fshow-iframe-when-press-html-button-does-not-work-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
-1
This should help you,
window.onload = function(){
document.getElementById("idweek").addEventListener('click', function(){
document.getElementById("week").style.display = "block";
});
}iframe{
display: none;
}<ul>
<li><button type="button" class="buttonweek" id="idweek">Hot This Week</button></li>
<iframe src="thisweek.php" id="week"></iframe>
</ul>answered Nov 13 '18 at 16:03
mbharanidharan88mbharanidharan88
4,03932454
add a comment |
-1
This should help you,
window.onload = function(){
document.getElementById("idweek").addEventListener('click', function(){
document.getElementById("week").style.display = "block";
});
}iframe{
display: none;
}<ul>
<li><button type="button" class="buttonweek" id="idweek">Hot This Week</button></li>
<iframe src="thisweek.php" id="week"></iframe>
</ul>answered Nov 13 '18 at 16:03
mbharanidharan88mbharanidharan88
4,03932454
add a comment |
-1
-1
-1
This should help you,
window.onload = function(){
document.getElementById("idweek").addEventListener('click', function(){
document.getElementById("week").style.display = "block";
});
}iframe{
display: none;
}<ul>
<li><button type="button" class="buttonweek" id="idweek">Hot This Week</button></li>
<iframe src="thisweek.php" id="week"></iframe>
</ul>answered Nov 13 '18 at 16:03
mbharanidharan88mbharanidharan88
4,03932454
This should help you,
window.onload = function(){
document.getElementById("idweek").addEventListener('click', function(){
document.getElementById("week").style.display = "block";
});
}iframe{
display: none;
}<ul>
<li><button type="button" class="buttonweek" id="idweek">Hot This Week</button></li>
<iframe src="thisweek.php" id="week"></iframe>
</ul>window.onload = function(){
document.getElementById("idweek").addEventListener('click', function(){
document.getElementById("week").style.display = "block";
});
}iframe{
display: none;
}<ul>
<li><button type="button" class="buttonweek" id="idweek">Hot This Week</button></li>
<iframe src="thisweek.php" id="week"></iframe>
</ul>window.onload = function(){
document.getElementById("idweek").addEventListener('click', function(){
document.getElementById("week").style.display = "block";
});
}iframe{
display: none;
}<ul>
<li><button type="button" class="buttonweek" id="idweek">Hot This Week</button></li>
<iframe src="thisweek.php" id="week"></iframe>
</ul>answered Nov 13 '18 at 16:03
mbharanidharan88mbharanidharan88
4,03932454
answered Nov 13 '18 at 16:03
mbharanidharan88mbharanidharan88
4,03932454
answered Nov 13 '18 at 16:03
mbharanidharan88mbharanidharan88
4,03932454
answered Nov 13 '18 at 16:03
mbharanidharan88mbharanidharan88
4,03932454
4,03932454
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53284853%2fshow-iframe-when-press-html-button-does-not-work-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Any errors thrown in browser console? Problem is probably related to Why does jQuery or a DOM method such as getElementById not find the element?
– charlietfl
Nov 13 '18 at 16:01
3
I've ran this code and it seems to work? Are you getting any console errors?
– Andrew1996
Nov 13 '18 at 16:02
Live demos are great, but they need to be Minimal, Complete, and Verifiable examples. It does not good to provide JS that depends on HTML and CSS without providing the HTML and CSS. It does not good to provide a demo with contains CSS and only CSS.
– Quentin
Nov 13 '18 at 16:10