• Advertisement
Sign in to follow this  

[web] JavaScript help

This topic is 3658 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
Advertisement
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
how do you make hidden div containers? I've only ever used them for css stuff.

That was pretty cool by the way ;)

Share this post


Link to post
Share on other sites
Feel free to do a 'view source' on my code and steal from it as you like. If you have any questions about it, just ask.

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
Is it at all possible to get the text to appear in a table or a CSS made box instead of the textbox, that way I can have formated text.

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
Sign in to follow this