单击按钮-窗体、时间和全局变量后，文本不会更改。

Question

我有4部分javascript代码，每个部分都应该在按相应按钮之后激活对文本ids的更改。我不知道为什么他们都不起作用。

版本2&5只是调用全局变量来显示版本4只显示一条消息，其中消息取决于版本7从输入表单获取值并显示它的时间。

对他们为什么不工作有什么想法吗？我不认为这是inner.HTML属性，因为我已经在其他函数上使用了这些属性。谢谢你的帮助，真的很感激

​

@charset "UTF-8";
/* CSS Document */

body{
	height:1000px;
	width:100%;
	background:#fff;
	margin:0;
}

.divider{
	width:100%;
	height:auto;
	background:#CCC;
	display:block;
	margin:10px;
}

h2{
	font-size:16px;
	display:block;
}
#confirm-paragraph{}
#global-variable-paragraph{}
#user-input{}
#expressions{}
#elephant-paragraph{}
#method-1{}
#method-2{}
#ml{}
#litres{}
#conditional-operator{}
#cast-1{}
#cast-2{}

<!-- Version 2 -->
<section class="divider">
<h2>Global Variable Example</h2>
<button onclick="DisplayAuthorName()">Click Me</button>
<p id="global-variable-paragraph">This text should change after clicking the button.</p>
<p style="color:red; font-weight:bold">NOT WORKING Version 2!!!!!!!!</p>
<script>
var nick = {forename:"Nick", surname:"Smith", age:25, height:null, starsign:undefined}; // object with 5 global variables
function DisplayAuthorName() {
	document.getElementById("global-variable-paragraph").innerHTML = forename + " " + surname + " is " + age;
}
</script>
</section>



<!-- Version 4 -->
<section class="divider">
<h2>Expressions Example</h2>
<button onclick="timeFunction()">Click Me</button>
<p id="expressions">This text should change after clicking the button.</p>
<p style="color:red; font-weight:bold">NOT WORKING Version4!!!!!!!!</p>
<script>
function timeFunction() {
	var time = new Date().getHours();
	var message;
	if (hour < 12) {
		message = "Good Morning.";
	} else if (12 < hour < 18) {
		message = "Good Afternoon.";
	} else {
		message = "Good Evening.";
	}
	document.getElementById("expressions").innerHTML = message;
}
</script>
</section>



<!-- Version 5 -->
<section class="divider">
<h2>Methods Example</h2>
<button onclick="UseMethods()">Click Me</button>
<p class="method-1">This should change to uppercase, and should display the forename global variable.</p>
<p class="method-2">This should change to a string and display the variable age.</p>
<p style="color:red; font-weight:bold">NOT WORKING Version5!!!!!!!!</p>
<p>Unable to call global variables?</p>
<script>
function UseMethods() {
document.getElementById("method-1").innerHTML = nick.forename.toUpperCase();
document.getElementById("method-2").innerHTML = nick.age.toString();
}
</script>
</section>



<!-- Version 7 -->
<section class="divider">
<h2>Conditional Operator Example</h2>
<p>Enter a number:</p>
<input id="inputtest">
<button onclick="ConditionalOperatorFunction()">Click Me</button>
<p id="conditional-operator">This text should change when entering a number and clicking the button.</p>
<p style="color:red; font-weight:bold">NOT WORKING Version7!!!!!!!!</p>
<script>
function ConditionalOperatorFunction(){
	var testnumber, largeorsmall;
	testnumber = document.getElementById("inputtest").value;
	largeorsmall = (inputnumber < 50) ? "This is a small number in my opinion!":"This is a large number in my opinion!";
	document.getElementById("conditional-operator").innerHTML = largeorsmall;
}
</script>
</section>

​

Answer 1

• 您没有正确地访问版本2中的变量，请使用nick.forename等。
• 小时未在版本4中定义
• 第7版，您可以对元素进行类处理并通过id进行访问。不是的！

注意:请检查代码中的错误并尝试。这很简单，检查控制台中的错误并进行更新。

​

@charset "UTF-8";
/* CSS Document */

body{
	height:1000px;
	width:100%;
	background:#fff;
	margin:0;
}

.divider{
	width:100%;
	height:auto;
	background:#CCC;
	display:block;
	margin:10px;
}

h2{
	font-size:16px;
	display:block;
}
#confirm-paragraph{}
#global-variable-paragraph{}
#user-input{}
#expressions{}
#elephant-paragraph{}
#method-1{}
#method-2{}
#ml{}
#litres{}
#conditional-operator{}
#cast-1{}
#cast-2{}

<!-- Version 2 -->
<section class="divider">
<h2>Global Variable Example</h2>
<button onclick="DisplayAuthorName()">Click Me</button>
<p id="global-variable-paragraph">This text should change after clicking the button.</p>
<p style="color:red; font-weight:bold">NOT WORKING Version 2!!!!!!!!</p>
<script>
var nick = {forename:"Nick", surname:"Smith", age:25, height:null, starsign:undefined}; // object with 5 global variables
function DisplayAuthorName() {
	document.getElementById("global-variable-paragraph").innerHTML = nick.forename + " " + nick.surname + " is " + nick.age;
}
</script>
</section>



<!-- Version 4 -->
<section class="divider">
<h2>Expressions Example</h2>
<button onclick="timeFunction()">Click Me</button>
<p id="expressions">This text should change after clicking the button.</p>
<p style="color:red; font-weight:bold">NOT WORKING Version4!!!!!!!!</p>
<script>
function timeFunction() {
	var hour = new Date().getHours();
	var message;
	if (hour < 12) {
		message = "Good Morning.";
	} else if (12 < hour < 18) {
		message = "Good Afternoon.";
	} else {
		message = "Good Evening.";
	}
	document.getElementById("expressions").innerHTML = message;
}
</script>
</section>



<!-- Version 5 -->
<section class="divider">
<h2>Methods Example</h2>
<button onclick="UseMethods()">Click Me</button>
<p id="method-1">This should change to uppercase, and should display the forename global variable.</p>
<p id="method-2">This should change to a string and display the variable age.</p>
<p style="color:red; font-weight:bold">NOT WORKING Version5!!!!!!!!</p>
<p>Unable to call global variables?</p>
<script>
function UseMethods() {
document.getElementById("method-1").innerHTML = nick.forename.toUpperCase();
document.getElementById("method-2").innerHTML = nick.age.toString();
}
</script>
</section>



<!-- Version 7 -->
<section class="divider">
<h2>Conditional Operator Example</h2>
<p>Enter a number:</p>
<input id="inputtest">
<button onclick="ConditionalOperatorFunction()">Click Me</button>
<p id="conditional-operator">This text should change when entering a number and clicking the button.</p>
<p style="color:red; font-weight:bold">NOT WORKING Version7!!!!!!!!</p>
<script>
function ConditionalOperatorFunction(number){
	var largeorsmall;
  inputnumber = document.getElementById("inputtest").value;
	largeorsmall = (inputnumber < 50) ? "This is a small number in my opinion!":"This is a large number in my opinion!";
	document.getElementById("conditional-operator").innerHTML = largeorsmall;
}
</script>
</section>

​

Answer 2

第2版：

forename是nick的一个属性。要使用forename，必须编写nick.forename。

演示

function DisplayAuthorName() {
    document.getElementById("global-variable-paragraph").innerHTML
        = nick.forename + " " + nick.surname + " is " + nick.age;
}

您应该在适当的js文件中编写代码。一个像样的编辑器会纠正这种错误。

第4版：

将time替换为hour。

演示

function timeFunction() {
    var hour = new Date().getHours();
    var message;
    if (hour < 12) {
        message = "Good Morning.";
    } else if (12 < hour < 18) {
        message = "Good Afternoon.";
    } else {
        message = "Good Evening.";
    }
    document.getElementById("expressions").innerHTML = message;
}

第5版：

你什么都不选。使用document.querySelector，就容易多了。

演示

function UseMethods() {
    document.querySelector(".method-1").innerHTML = nick.forename.toUpperCase();
    document.querySelector(".method-2").innerHTML = nick.age.toString();
}