Sign in to follow this  

[web] JavaScript help

This topic is 3584 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

When I undertook my multimedia exam last year, for the coding questions they let you select your prefered language with radio buttons and the textarea, chagned the code accordingly, I liked this idea as you could see the same code written in a few different languages, I'd like to try this out with javascript on a webpage, but I dont really know where to store the different code to display, At first thought I'm thinking that a switch statement or if/else block to check which radio button is selected and then it will display the text. So my question is what would be the best way of doing this? -regards Namingway

Share this post


Link to post
Share on other sites
If I were you'd, i'd approach this by storing the code in several different hidden DIV containers. You can then use javascript to listen for which radio button is active, and turn the appropriate div from hidden to visable.

I have similar code I wrote not to long ago here:
http://www.lordsofmidnight.com/test.php

If you mouse over the ?'s on the left, you'll see how the div fields not only go from hidden to non-hidden, but are placed on the page based on the location of the image file. I was pretty proud of writing it.

Share this post


Link to post
Share on other sites
okay here's the basic setup before I actually make the code to print out to the textarea, it isnt working as of yet :( I'm not quite sure what to fix up to get this working.

<script type="text/javascript">
<!--
function ShowLanguageCode(lang)
{
if(lang == "C")
{
return document.getElementById("txt").value = "This is the C code";
}
else
{
return document.getElementById("txt").value = "No code";
}
}
-->
</script>

</head>

<body>
Select your language:
<form name="testForm">
<input type="radio" name="language" value="C" onclick="ShowLanguageCode("C")"/>C<br />
<input type="radio" name="language" value="Cplusplus" />C++<br />
<input type="radio" name="language" value="Csharp" />C#<br />
<input type="radio" name="language" value="Delphi" />Delphi<br />
<input type="radio" name="language" value="Java" />Java<br />
<input type="radio" name="language" value="VB" />Visual Basic<br />
<textarea id="txt"></textarea>
</form>
</body>




My goal was to have it so if you click the C radio button it displays the text in textArea: This is the C code

Share this post


Link to post
Share on other sites
When you pass in 'C', use single quotes in lieu of doubles. Ie:

replace:

<input type="radio" name="language" value="C" onclick="ShowLanguageCode("C")"/>C<br />

with

<input type="radio" name="language" value="C" onclick="ShowLanguageCode('C')"/>C<br />

Share this post


Link to post
Share on other sites
You can do this with the use of DIV's. Basically, you'll do the following:

<div id = 1 position = 'xx', hidden>Code for C#</div>
<div id = 2 position = 'xx', hidden>Code for C++</div>
...
<div id = 10 position = 'xx', hidden>Code for Java</div>

Since they are all hidden, they will not show up unless they are set to visible. The code would be very similar to what you have now, except you'd change the visible/hidden attribute on each div as you onclicked and offclicked each radio button.

Share this post


Link to post
Share on other sites
okay its not working so far, dreamweaver doesnt have the position or hidden/visible attribute :O..

And the w3schools site didnt give me any info on using those attributes either I tried this

<script type="text/javascript">
<!--
function ShowLanguageCode(lang)
{
switch(lang)
{
case 'C':
return document.getElementById("1") = "visible";
break;
default:
break;
}
}
-->
</script>
<form name="testForm">
<p>
<input type="radio" name="language" value="C" onclick="ShowLanguageCode('C')"/>
C<br />
<input type="radio" name="language" value="Cplusplus" onclick="ShowLanguageCode('Cplusplus')"/>
C++<br />
<input type="radio" name="language" value="Csharp" />
C#<br />
<input type="radio" name="language" value="Delphi" />
Delphi<br />
<input type="radio" name="language" value="Java" />
Java<br />
<input type="radio" name="language" value="VB" />
Visual Basic<br />
</p>

</form>
<table width="215" height="75" border="1">
<tr>
<div id='1' hidden><td>C Code should go here</td></div>
</tr>
</table>



I wasnt sure whether div was for inside or outside the table so i tried both and neither worked, but I'm presuming its inside the <td> tag

Share this post


Link to post
Share on other sites
Use this:

<script type="text/javascript">

function setLyr(lyr)
{
var x = document.getElementById(lyr);
x.style.visibility = 'visible';
}

function hide(lyr)
{
var x = document.getElementById(lyr);
x.style.visibility = 'hidden';
}

</script>

<form name="testForm">
<input type="radio" name="language" onfocus="setLyr('Layer1')" onblur="hide('Layer1')"/>C<br />
<input type="radio" name="language" onfocus="setLyr('Layer2')" onblur="hide('Layer2')"/>C++<br />
</form>

<table width="215" height="75" border="1">
<tr>
<td>
<div id='Layer1' style="visibility: hidden">C Code should go here

<div id='Layer2' style="visibility: hidden">C++ Code should go here

</td>
</tr>
</table>

You will notice that the text for the code does not keep itself in one spot. To resolve this, you will need to assign a position to each div. Google search for div position to see what sort of options you have.

Share this post


Link to post
Share on other sites
Perfect, thank you so much for that, its exactly what I wanted :D rating++
Edit: There is one thing I noticed if you try to select the code it hides it, am I able to hide the other code from within the onclick method as well, instead of on blur?

Share this post


Link to post
Share on other sites
If you use visibility:hidden, the elements will still occupy space on the page. Is that what you want?

To answer your last question: you could remove the onblur hook. If you set it up for onclick, you would just need to make sure you hide anything previously shown.

I would do it this way:

<form name="languageForm">
<input type="radio" name="language" value="C" onclick="showCodeSample(this.value);" />C<br />
<input type="radio" name="language" value="Cplusplus" onclick="showCodeSample(this.value);" />C++<br />
<input type="radio" name="language" value="Csharp" onclick="showCodeSample(this.value);" />C#<br />
<input type="radio" name="language" value="Delphi" onclick="showCodeSample(this.value);" />Delphi<br />
<input type="radio" name="language" value="Java" onclick="showCodeSample(this.value);" />Java<br />
<input type="radio" name="language" value="VB" onclick="showCodeSample(this.value);" />Visual Basic<br />
<div id="CODE-SAMPLE">

</form>

<script type="text/javascript">
var codeSampleStrings = new Object();
codeSampleStrings["C"] = "C code sample";
codeSampleStrings["Cplusplus"] = "C++ code sample";
codeSampleStrings["Csharp"] = "C# code sample";
codeSampleStrings["Delphi"] = "Delphi code sample";
codeSampleStrings["Java"] = "Java code sample";
codeSampleStrings["VB"] = "VB code sample";

function showCodeSample(strLang) {
changeCodeSample(codeSampleStrings[strLang]);
}

function changeCodeSample(strCodeSample) {
if(document.getElementById) {
var sampleContainer = document.getElementById("CODE-SAMPLE");
sampleContainer.innerHTML = strCodeSample;
}
}
</script>If you need more robust code samples, then I would create them on the page (instead of in code) and display them in a pre tag so the formatting sticks.

[Edited by - Maxamor on February 21, 2008 12:13:56 AM]

Share this post


Link to post
Share on other sites

This topic is 3584 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this