How to call an applet method from JavaScript

I have created an applet and I am going to access an applet method from my HTML page on a web project.

Here my applet looks like:

public class MessageApplet extends Applet {

    private Label m_mess;

    public void init()
    {
        setBackground(Color.lightGray);
        setLayout(new BorderLayout());
        m_mess = new Label("MessageApplet is Running...: No Selection Yet", Label.CENTER);
        add(BorderLayout.CENTER, m_mess);
    }

    public void setMessage(String message)
    {
        m_mess.setText("Selection: " + message);
    }
}

And my HTML page looks like:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    <SCRIPT LANGUAGE="JavaScript">
        function selectedCity()
        {
            if(document.CityChoice.City[0].checked == true)
            {
                document.SimpleMessageApplet.setMessage(document.CityChoice.City[0].value);
            }
        }
    </SCRIPT>
</HEAD>

<BODY>
    <b>This is the applet</b>
    <APPLET 
        CODE="MessageApplet.class" 
        NAME="SimpleMessageApplet" 
        WIDTH=350
        HEIGHT=100>
    </APPLET>
    <FORM NAME="CityChoice">
        <input type="radio" name="City" value="Boston" onClick="selectedCity()"> Boston<br>
    </form>
</BODY>

</html>

But when I click radio button my browser hangs and I cannot access the applet method ever.

My applet class is in default directory and HTML is in WebContent folder. What should I change in my code?

Solution

The problem is the if statement check:

document.CityChoice.City[0].checked == true

This is not exactly how it goes with JavaScript since the wrong expression you have there throws an error and it never makes it into the if statement body.

I removed the if statement and changed the code to something like this:

function selectedCity()
{
    document.SimpleMessageApplet.setMessage("Hello");
}

When I click I see the Hello message fine.

Change your HTML file content to something like:

<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Insert title here</title>
        <SCRIPT LANGUAGE="JavaScript">
            function selectedCity()
            {
                var elem = document.getElementById('cityRb');

                if(elem.checked)
                {
                    document.SimpleMessageApplet.setMessage(elem.value);
                }
            }
        </SCRIPT></HEAD>
    <BODY >
        <b>This is the Applet</b>
    <APPLET CODE="MessageApplet.class" NAME="SimpleMessageApplet" WIDTH=350 HEIGHT=100 >
    </APPLET >
    <FORM NAME="CityChoice">
        <input type="radio" id="cityRb" name="City" value="Boston" onClick="selectedCity()"> Boston<br>
    </form>
</BODY >
</html>

Also adding the full class code:

import java.applet.Applet;
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Label;

/**
 *
 * @author hmmmmm
 */
public class MessageApplet extends Applet {

    private Label m_mess;

    public void init() {
        setBackground(Color.lightGray);
        setLayout(new BorderLayout());
        m_mess = new Label("MessageApplet is Running...: No Selection Yet", Label.CENTER);
        add(BorderLayout.CENTER, m_mess);
        m_mess.setBackground(Color.red);
    }

    public void setMessage(String message) {
        m_mess.setText("Selection: " + message);
    }
}