Javascript code not working

Question

1.00/5 (1 vote)

See more:

I am trying to make a html and javascript web page. In the webpage there will be just 3 objects. One textbox, a button and another heading. I want the javascript code in a way so that if I enter "y" in the textbox and press the button then the heading text will show "LIKE". I know it is very easy and simple but I am unable to do it. Please help me.

Posted 25-Oct-15 6:12am

Abeer Hussain

Add a Solution

3 solutions

Solution 3

Abeer Hussain asked

I need another help. What should I do if I want to display an image instead of the "LIKE" heading? Suppose I have like.png in my computer and I want that to show when i write 'y' in the textbox.

Here is how:

To put an image, use

HTML

<img src="myImageFile.png" id="myImage"/>

You may need this id for getting a DOM reference to it via document.getElementById.

Then you can use JavaScript to change visibility and possibly src of this element. One of the many ways to change visibility is:

JavaScript

function hide(object) { object.style.visibility = "hidden"; }
function show(object) { object.style.visibility = null; }

This is another way:

C#

function hide(object) { object.style.display = "none"; }
function show(object) { object.style.display = "block"; } // or other display type

Different methods affect your layout in different ways; reserve space or collapse it, and so on. Learn CSS for all the detail.

You can change any attribute and its value (such as src using setAttribute:
https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute[^].

And so on…

—SA

Posted 25-Oct-15 9:30am

Sergey Alexandrovich Kryukov

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Krunal Rohit · Accepted Answer · 2015-10-25T06:20:00

Solution 1

Quote:
it is very easy and simple but I am unable to do it.

First, What is stopping you there ?
Second, What have you created so far to get this done ?
Third, Where did you stuck ?

How can you say its simple if you haven't tried ? And if it is simple, why can't you give it a try ?
All you need is if condition on button click and jQuery .text() method to change the text.

http://api.jquery.com/text/[^]
http://www.w3schools.com/jquery/html_text.asp[^]

And please change the subject to something related. :)

HTML

<h2>some heading</h2>
<input type="text" />
<button>click me!</button>

JavaScript

$("button").click(function() {
    if($("input").val() == 'Y'){
        $("h2").text("LIKE");
    }
});

-KR

Posted 25-Oct-15 6:20am

Krunal Rohit

Updated 25-Oct-15 6:28am

v2

Comments

Abeer Hussain 25-Oct-15 12:42pm

First, my code is stopping me there.
Second, I have created the code below for this.
Third, my code is not working.

<html>
<head>
<title>Emogic</title>
</head>
<body>
<input type="text" id="input">
<input >
<p id="output"></p>

<script>
function appear(){

var value = document.getElementByid("input").value
var out = document.getElementById("output");
var result = out.innerHTML
if(value == "y"){
out.innerHTML = "LIKE";
}
else if(value == ""){
alert("You must enter a valid character.");
}
else{
alert("Character not recognised.");
}
}

</script>
</body>
</html>

Sergey Alexandrovich Kryukov 25-Oct-15 15:15pm

All right, but you've done a number of bugs. Please see Solution 2, where I show a complete fix and give you further advice.
Will you accept it formally, too?
—SA

Abeer Hussain 25-Oct-15 12:42pm

But thanks for your help.

Krunal Rohit 25-Oct-15 12:45pm

:)
-KR

Abeer Hussain 25-Oct-15 12:52pm

I need another help. What should I do if I want to display an image instead of the "LIKE" heading? Suppose I have like.png in my computer and I want that to show when i write 'y' in the textbox.

Sergey Alexandrovich Kryukov 25-Oct-15 15:17pm

Use the tag <img>. Hide or show it as needed, using CSS classes. You can change/add/remove CSS class or just the style in JavaScript.
—SA

Sergey Alexandrovich Kryukov 25-Oct-15 15:31pm

You will find my detailed answer in Solution 2.
Will you accept it formally, too?
—SA

Sergey Alexandrovich Kryukov · Accepted Answer · 2015-10-25T09:14:00

Look, you won't achieve anything if you work in so inaccurate manner and pay so little attention.
You have done two major bugs: misspelled (wrong capitalization) in getElementById (remember, this is a case-sensitive language) and, more importantly, your function is never called. Wasn't it so hard to detect? Just use some text editor's "Find", to see that the function name appears only once.

You have create a good number of other problems, such as repeating getElementById again and again, but it's not critical. Some are just spelling. On way to fix it all would be

XML

<html>
<head>
    <title>Emogic</title>
</head>
<body>

<input type="text" id="input"></input>
<p id="output">?</p><br/>
<button id="button">Cick here!</button>

<script>

var input = document.getElementById("input");
var out = document.getElementById("output");

function appear() {
    var value = input.value;
    if (value == "y")
        out.innerHTML = "LIKE";
    else if (value == "")
        alert("You must enter a valid character.");
    else
        alert("Input not recognized.");
    var result = out.innerHTML;
}

var button = document.getElementById("button");
button.onclick = appear;

</script>
</body>
</html>

Nevertheless, you made something to start with. From this point, better try to write all text accurately, use the debuggers (the simplest is the one which comes with Google Chrome, but its API is not the most convenient). In your CodeProject questions, never put code in comment. Put it in the body of the question and format nicely. Use the element

<pre lang="JavaScript">

   // your code here

</pre>

or

<pre lang="html">

   <!-- your code here -->

</pre>

Also, "alert" is only good in code under the debugging. For production, use the same kind of output as you are already using, via innerHTML.

Good luck,

—SA