Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Nathan Dragoo
Nathan Dragoo
16,468 Points

HTML and JAVA SCRIPT project. Buttons and functions.

I am attempting to create a HTML that has conversion input with buttons. I have not yet grasped how to do this type of thing I was hoping someone could help me. Do I need to add an anchor to the HTML for the function or is something like this possible? I don't know if this will interpret the code right but I will post it with my question, hopefully someone can help me get this figured out. Thanks a lot, I look forward to the responses. ///HTML <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Conversion Tables </title> <link rel="stylesheet" href="CSS/energy_conversion.css"> <link rel="javascript" href="JS/energy_conversion.js"> <link rel="stylesheet" href="CSS/frequencyconversions.css"> </head>

<body>
<header> Energy Conversion Tables </header>
    <h1>Choose which conversion table you want to use by pushing the coordinate button with the coinciding conversion listing.
    </h1>
    <h2 class="table">
  <label for="Enter Frequency">Enter the frequency to be converted to coordinated sound variable. </label>
    <input type="int" id="frequncy_conversions" name="Enter Frequency"></input>

<button id="frequency_conversions" type="submit">Submit Frequency</button>    </h2>
<h3 class="table">
<label for="Light distance conversion">Enter seconds light has traveled.</label>
    <input type="int" id="distance_of_light" name="Light distance conversion"></input>
    <button id="light_conversion" type="submit">Submit number of seconds</button>
</h3>

</body>

</html>

///javascript function frequency_conversion { if (frequency >=20 && frequency <= 200 ) frequency = bass; if else (frequency >= 200 && frequency <= 3000) frequency = midrange; if else (frequency >= 3000) frequency = treble; else frequency = alert ("out of range") } function distance_light { return speed_of_light * seconds; }

tuukka uosukainen
tuukka uosukainen
22,107 Points

Hi Nathan,

Not sure if this is what you are asking for but you can use 

<input type="button" onclick="frequency_conversion()" value="Submit number of seconds">

instead of button tag to start your JavaScript code.

Also I suggest you use HTML validator to find out other errrors in your code:

https://validator.w3.org/#validate_by_input

I hope this helps. Happy coding!

1 Answer

Steven Parker
Steven Parker
243,331 Points
Steven Parker
Steven Parker
243,331 Points

The typical way of connecting a button to a javascript function is using the onclick property. But you also have a few rough points to iron out in your program including:

  • syntax errors in function declarations
  • syntax errors in if/else constructs
  • other syntax errors
  • functions need to get data from the fields
  • functions need to put the result somewhere on the page
  • "int" is not an input type (but it seems to use it as if it were "text")

For examples, these modified sections of the code and JavaScript minimally fix these issues for the first input:

    <h2 class="table">
        <label for="Enter Frequency">
            Enter the frequency to be converted to coordinated sound variable. 
        </label>
        <input type="int" id="frequncy_conversions" name="Enter Frequency"></input>
        <button id="frequency_conversions" onclick="frequency_conversion();">
            Submit Frequency
        </button>
        <br>
        That frequency is <span id="range">not submitted yet</span>.
    </h2>

function frequency_conversion() {
    var frequency = document.getElementById("frequncy_conversions").value;
    // note: using the same variable for input AND output is not good practice
    if (frequency >= 20 && frequency <= 200) frequency = "bass";
    else if (frequency >= 200 && frequency <= 3000) frequency = "midrange";
    else if (frequency >= 3000) frequency = "treble";
    else frequency = "out of range";
    document.getElementById("range").innerHTML = frequency;
}
Nathan Dragoo
Nathan Dragoo
16,468 Points

This was very helpful, I am very grateful. Thank you so much.