Javascript OnClick函数仅在第二次单击时起作用

我有以下代码来创建一些函数：

hidePara1（）

，它在段落的CSS

hidden

属性之间切换；和

displayFrame（）

，这与Iframe的

display

属性相同。段落和Iframe都使用CSS分别设置为

显示：无

和

可见性：隐藏

var Par1 = document.getElementById("para1");
var Frame1 = document.getElementById("iframe1");        

function hidePara1() {
  Par1.style.display = ((Par1.style.display!='none') ? 'none' : 'block')
}

function displayFrame() {
  Frame1.style.visibility = ((Frame1.style.visibility!='hidden') ? 'hidden' : 'visible');
}

<a href="#" onclick="displayFrame();">Display iFrame</a>        
<div class="frame-container"><iframe id="iframe1" src="somelink" width="800" height="460"></iframe></div>

<img id="img1" onclick="hidePara1();" src="someimage.jpg">
<div id="para1">
<p>This is the text for paragraph 1.</p>
</div>

<script>
var Par1 = document.getElementById("para1");
var Frame1 = document.getElementById("iframe1");        

function hidePara1() {
  Par1.style.display = ((Par1.style.display!='none') ? 'none' : 'block')
}

function displayFrame() {
  Frame1.style.visibility = ((Frame1.style.visibility!='hidden') ? 'hidden' : 'visible');
}
</script>

元素所在的HTML，我也通过onClick属性调用函数

<a href="#" onClick="displayFrame();">Display iFrame</a>        
<div class="frame-container"><iframe id="iframe1" src="somelink" width="800" height="460"></iframe></div>

<img id="img1" onClick="hidePara1();" src="someimage.jpg">
<div id="para1">
<p>This is the text for paragraph 1.</p>
</div>

<a href="#" onclick="displayFrame();">Display iFrame</a>        
<div class="frame-container"><iframe id="iframe1" src="somelink" width="800" height="460"></iframe></div>

<img id="img1" onclick="hidePara1();" src="someimage.jpg">
<div id="para1">
<p>This is the text for paragraph 1.</p>
</div>

<script>
var Par1 = document.getElementById("para1");
var Frame1 = document.getElementById("iframe1");        

function hidePara1() {
  Par1.style.display = ((Par1.style.display!='none') ? 'none' : 'block')
}

function displayFrame() {
  Frame1.style.visibility = ((Frame1.style.visibility!='hidden') ? 'hidden' : 'visible');
}
</script>

这是第1段的案文

<a href="#" onclick="displayFrame();">Display iFrame</a>        
<div class="frame-container"><iframe id="iframe1" src="somelink" width="800" height="460"></iframe></div>

<img id="img1" onclick="hidePara1();" src="someimage.jpg">
<div id="para1">
<p>This is the text for paragraph 1.</p>
</div>

<script>
var Par1 = document.getElementById("para1");
var Frame1 = document.getElementById("iframe1");        

function hidePara1() {
  Par1.style.display = ((Par1.style.display!='none') ? 'none' : 'block')
}

function displayFrame() {
  Frame1.style.visibility = ((Frame1.style.visibility!='hidden') ? 'hidden' : 'visible');
}
</script>

问题很奇怪：从第二次单击开始，两个onclick事件都能完美工作。换句话说，第一次单击时两者都不起作用。从我遇到的大量其他类似问题来看，这似乎是一个相当普遍的问题，但我无法理解，其中一个问题可能会对我有所帮助。请注意，它还需要是普通的JS-框架无法做到这一点

<a href="#" onclick="displayFrame();">Display iFrame</a>        
<div class="frame-container"><iframe id="iframe1" src="somelink" width="800" height="460"></iframe></div>

<img id="img1" onclick="hidePara1();" src="someimage.jpg">
<div id="para1">
<p>This is the text for paragraph 1.</p>
</div>

<script>
var Par1 = document.getElementById("para1");
var Frame1 = document.getElementById("iframe1");        

function hidePara1() {
  Par1.style.display = ((Par1.style.display!='none') ? 'none' : 'block')
}

function displayFrame() {
  Frame1.style.visibility = ((Frame1.style.visibility!='hidden') ? 'hidden' : 'visible');
}
</script>

如果能解决这个问题，我们将不胜感激

<a href="#" onclick="displayFrame();">Display iFrame</a>        
<div class="frame-container"><iframe id="iframe1" src="somelink" width="800" height="460"></iframe></div>

<img id="img1" onclick="hidePara1();" src="someimage.jpg">
<div id="para1">
<p>This is the text for paragraph 1.</p>
</div>

<script>
var Par1 = document.getElementById("para1");
var Frame1 = document.getElementById("iframe1");        

function hidePara1() {
  Par1.style.display = ((Par1.style.display!='none') ? 'none' : 'block')
}

function displayFrame() {
  Frame1.style.visibility = ((Frame1.style.visibility!='hidden') ? 'hidden' : 'visible');
}
</script>

谢谢这些：

var Par1 = document.getElementById("para1");
var Frame1 = document.getElementById("iframe1");        

<a href="#" onclick="displayFrame();">Display iFrame</a>        
<div class="frame-container"><iframe id="iframe1" src="somelink" width="800" height="460"></iframe></div>

<img id="img1" onclick="hidePara1();" src="someimage.jpg">
<div id="para1">
<p>This is the text for paragraph 1.</p>
</div>

<script>
var Par1 = document.getElementById("para1");
var Frame1 = document.getElementById("iframe1");        

function hidePara1() {
  Par1.style.display = ((Par1.style.display!='none') ? 'none' : 'block')
}

function displayFrame() {
  Frame1.style.visibility = ((Frame1.style.visibility!='hidden') ? 'hidden' : 'visible');
}
</script>

应在负载情况下进行，即：

// Global declaration, thos I don't think this matter as much as....
var Par1 ;
var Frame1 ;        


// ...this.  Your calls to getElementById() may be executing before 
// the page has finished loading.  Making the assignment in OnLoad
// guarantees the elements are available an I'm thinking should fix 
// the issue with it not working first time through.

function init() {
  Par1 = document.getElementById("para1");
  Frame1 = document.getElementById("iframe1");        
}

<a href="#" onclick="displayFrame();">Display iFrame</a>        
<div class="frame-container"><iframe id="iframe1" src="somelink" width="800" height="460"></iframe></div>

<img id="img1" onclick="hidePara1();" src="someimage.jpg">
<div id="para1">
<p>This is the text for paragraph 1.</p>
</div>

<script>
var Par1 = document.getElementById("para1");
var Frame1 = document.getElementById("iframe1");        

function hidePara1() {
  Par1.style.display = ((Par1.style.display!='none') ? 'none' : 'block')
}

function displayFrame() {
  Frame1.style.visibility = ((Frame1.style.visibility!='hidden') ? 'hidden' : 'visible');
}
</script>

html:

<body onload="init();">

<a href="#" onclick="displayFrame();">Display iFrame</a>        
<div class="frame-container"><iframe id="iframe1" src="somelink" width="800" height="460"></iframe></div>

<img id="img1" onclick="hidePara1();" src="someimage.jpg">
<div id="para1">
<p>This is the text for paragraph 1.</p>
</div>

<script>
var Par1 = document.getElementById("para1");
var Frame1 = document.getElementById("iframe1");        

function hidePara1() {
  Par1.style.display = ((Par1.style.display!='none') ? 'none' : 'block')
}

function displayFrame() {
  Frame1.style.visibility = ((Frame1.style.visibility!='hidden') ? 'hidden' : 'visible');
}
</script>

---

在处理程序中，您可以访问

Par1.style

。元素的

style

属性引用内联

style=“…”

HTML属性中的样式属性。您在其他地方指定，CSS中有如下内容：

#para1 {
    display: none;
}

<a href="#" onclick="displayFrame();">Display iFrame</a>        
<div class="frame-container"><iframe id="iframe1" src="somelink" width="800" height="460"></iframe></div>

<img id="img1" onclick="hidePara1();" src="someimage.jpg">
<div id="para1">
<p>This is the text for paragraph 1.</p>
</div>

<script>
var Par1 = document.getElementById("para1");
var Frame1 = document.getElementById("iframe1");        

function hidePara1() {
  Par1.style.display = ((Par1.style.display!='none') ? 'none' : 'block')
}

function displayFrame() {
  Frame1.style.visibility = ((Frame1.style.visibility!='hidden') ? 'hidden' : 'visible');
}
</script>

这不会在

Par1.style.display

中找到。如果您想查看当前应用的内容，请查看

<a href="#" onclick="displayFrame();">Display iFrame</a>        
<div class="frame-container"><iframe id="iframe1" src="somelink" width="800" height="460"></iframe></div>

<img id="img1" onclick="hidePara1();" src="someimage.jpg">
<div id="para1">
<p>This is the text for paragraph 1.</p>
</div>

<script>
var Par1 = document.getElementById("para1");
var Frame1 = document.getElementById("iframe1");        

function hidePara1() {
  Par1.style.display = ((Par1.style.display!='none') ? 'none' : 'block')
}

function displayFrame() {
  Frame1.style.visibility = ((Frame1.style.visibility!='hidden') ? 'hidden' : 'visible');
}
</script>

或者只是以另一种方式执行条件反射：

Par1.style.display = ((Par1.style.display!='block') ? 'block' : 'none')

<a href="#" onclick="displayFrame();">Display iFrame</a>        
<div class="frame-container"><iframe id="iframe1" src="somelink" width="800" height="460"></iframe></div>

<img id="img1" onclick="hidePara1();" src="someimage.jpg">
<div id="para1">
<p>This is the text for paragraph 1.</p>
</div>

<script>
var Par1 = document.getElementById("para1");
var Frame1 = document.getElementById("iframe1");        

function hidePara1() {
  Par1.style.display = ((Par1.style.display!='none') ? 'none' : 'block')
}

function displayFrame() {
  Frame1.style.visibility = ((Frame1.style.visibility!='hidden') ? 'hidden' : 'visible');
}
</script>

<a href="#" onclick="displayFrame();">Display iFrame</a>        
<div class="frame-container"><iframe id="iframe1" src="somelink" width="800" height="460"></iframe></div>

<img id="img1" onclick="hidePara1();" src="someimage.jpg">
<div id="para1">
<p>This is the text for paragraph 1.</p>
</div>

<script>
var Par1 = document.getElementById("para1");
var Frame1 = document.getElementById("iframe1");        

function hidePara1() {
  Par1.style.display = ((Par1.style.display!='none') ? 'none' : 'block')
}

function displayFrame() {
  Frame1.style.visibility = ((Frame1.style.visibility!='hidden') ? 'hidden' : 'visible');
}
</script>

你的代码在小提琴上完美地工作。

<a href="#" onclick="displayFrame();">Display iFrame</a>        
<div class="frame-container"><iframe id="iframe1" src="somelink" width="800" height="460"></iframe></div>

<img id="img1" onclick="hidePara1();" src="someimage.jpg">
<div id="para1">
<p>This is the text for paragraph 1.</p>
</div>

<script>
var Par1 = document.getElementById("para1");
var Frame1 = document.getElementById("iframe1");        

function hidePara1() {
  Par1.style.display = ((Par1.style.display!='none') ? 'none' : 'block')
}

function displayFrame() {
  Frame1.style.visibility = ((Frame1.style.visibility!='hidden') ? 'hidden' : 'visible');
}
</script>

这是第1段的案文

<a href="#" onclick="displayFrame();">Display iFrame</a>        
<div class="frame-container"><iframe id="iframe1" src="somelink" width="800" height="460"></iframe></div>

<img id="img1" onclick="hidePara1();" src="someimage.jpg">
<div id="para1">
<p>This is the text for paragraph 1.</p>
</div>

<script>
var Par1 = document.getElementById("para1");
var Frame1 = document.getElementById("iframe1");        

function hidePara1() {
  Par1.style.display = ((Par1.style.display!='none') ? 'none' : 'block')
}

function displayFrame() {
  Frame1.style.visibility = ((Frame1.style.visibility!='hidden') ? 'hidden' : 'visible');
}
</script>

var Par1=document.getElementById（“para1”）；
var Frame1=document.getElementById（“iframe1”）；
函数hidePara1（）{
Par1.style.display=（（Par1.style.display！='none'）？'none'：'block'）
}
函数displayFrame（）{
Frame1.style.visibility=（（Frame1.style.visibility！=“隐藏”）？“隐藏”：“可见”）；
}

---

当您说这些元素是使用CSS进行样式化时，我假设您的意思是“使用一些选择器进行样式化，例如

#para1{display:none；}

”

<a href="#" onclick="displayFrame();">Display iFrame</a>        
<div class="frame-container"><iframe id="iframe1" src="somelink" width="800" height="460"></iframe></div>

<img id="img1" onclick="hidePara1();" src="someimage.jpg">
<div id="para1">
<p>This is the text for paragraph 1.</p>
</div>

<script>
var Par1 = document.getElementById("para1");
var Frame1 = document.getElementById("iframe1");        

function hidePara1() {
  Par1.style.display = ((Par1.style.display!='none') ? 'none' : 'block')
}

function displayFrame() {
  Frame1.style.visibility = ((Frame1.style.visibility!='hidden') ? 'hidden' : 'visible');
}
</script>

---

Par1.style.display

但是，只查找div上的

style

属性，在上面假设的情况下，该属性最初没有设置。因此，第一次单击将在div上设置

style=“display:none；”“

，您应该能够使用开发人员工具或firebug观察到它。

将您的代码发布到JSFIDLE中并在此处共享。这是解决问题的另一种方法吗？如果不是，那么声明加载变量的原因是什么？谢谢。所以style属性实际上没有在样式表中设置CSS？哇，我一直认为这就是重点。无论如何，非常感谢——你的回答我最理解。我决定改变条件值的顺序，它可以完美地工作。出于兴趣，是否有一种方法或类似的东西来获取样式表中的CSS集？在我看来，不能从样式表中读取值会使样式变得多余。还是我在这里遗漏了什么？除了

getComputedStyle

？如果查看

元素的

.sheet.cssRules

，您可以看到实际的CSS规则啊，没关系，我误解了。我假设getComputedStyle是一个特定于控制台/调试的属性，而不是本机JavaScript属性。再次感谢！这样就可以了——我忽略了在我的帖子中包含CSS，其他回答者已经明确指出CSS是问题的一部分。无论如何，谢谢你。

<a href="#" onclick="displayFrame();">Display iFrame</a>        
<div class="frame-container"><iframe id="iframe1" src="somelink" width="800" height="460"></iframe></div>

<img id="img1" onclick="hidePara1();" src="someimage.jpg">
<div id="para1">
<p>This is the text for paragraph 1.</p>
</div>

<script>
var Par1 = document.getElementById("para1");
var Frame1 = document.getElementById("iframe1");        

function hidePara1() {
  Par1.style.display = ((Par1.style.display!='none') ? 'none' : 'block')
}

function displayFrame() {
  Frame1.style.visibility = ((Frame1.style.visibility!='hidden') ? 'hidden' : 'visible');
}
</script>