user3760941 user3760941 - 9 months ago 23
CSS Question

Text does not change after clicking the buttons - forms, time & global variables

I have 4 sections of javascript code where each should activate changes to text ids following pressing the corresponding buttons. I'm not sure why none of them are working.

Versions 2 & 5 just calls global variables to display
Version 4 just displays a message, where the message depends on the time
Version 7 just takes the value from an input form and displays it

Any ideas of why they are not working? I don't think its the inner.HTML attribute as I have got these to work on other functions. thanks for any help, really appreciate it



@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 Source
  • You are not accessing the variables correctly in version 2 use nick.forename etc.
  • hour is not defined in version 4
  • version 7 , you have class to the element and accessing through id. No!

Note: Please check the errors in your code and try. It's pretty much straightforward, check the errors in the console and update.

@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>