Creating Functions with HTML, CSS, and Javascript

Question

Creating Functions with HTML, CSS, and Javascript

I have been working on a website that is designed to convert numbers for you. Most of the code is complete, but I have encountered an error that I am currently unable to resolve. When I try to run the code, I see content on the page but when I click the button, the conversion does not occur as expected.

<div id = "conversion">
function feet() {
  var userinches = document.getElementById('userinches').value;
  doOuput('The answer is', userinches / 0.0833, ' ft');
}

function doOuput(val, unit) {
  //console.log('Convert To ' + unit);
  document.getElementById('results').innerHTML = val + unit;
}
</div><!-- End of conversion div section -->

javascript html css

Answer 1

Answer №1

To properly incorporate JavaScript into your code, make sure to enclose it within a script tag. It's recommended to separate your JavaScript code from the HTML file by creating a separate JS file and then including that file in your HTML document.

<div id="question">
  <h2>Unit Convertor</h2>
  <img src="" alt="Picture of basketball">
  <p>Enter a Quanity of Inches: <input id="userinches" type="number" /> </p>
</div>

<div id="conversion">
  <script>
    function feet() {
      var userinches = document.getElementById('userinches').value;
      doOuput('The answer is', userinches / 0.0833, ' ft');
    }

    function cm() {
      var userinches = document.getElementById('userinches').value;
      doOuput('The answer is', userinches * 2.54, ' cm');
    }

    function yards() {
      var userinches = document.getElementById('userinches').value;
      doOuput('The answer is', userinches / 0.02778, ' yard');
    }

    function doOuput(val, unit) {
      //console.log('Convert To ' + unit);
      document.getElementById('results').innerHTML = val + unit;
    }
  </script>
</div>

<div="buttons">
  <button type="button" onclick="feet();">Feet</button>
  <button type="button" onclick="cm();">Centimeters</button>
  <button type="button" onclick="yards();">Yards</button>
  </div>
  <!-- End of buttons div section -->

  <div id="results"></div>

Answer 2

To properly incorporate JavaScript into your code, make sure to enclose it within a script tag. It's recommended to separate your JavaScript code from the HTML file by creating a separate JS file and then including that file in your HTML document.

<div id="question">
  <h2>Unit Convertor</h2>
  <img src="" alt="Picture of basketball">
  <p>Enter a Quanity of Inches: <input id="userinches" type="number" /> </p>
</div>

<div id="conversion">
  <script>
    function feet() {
      var userinches = document.getElementById('userinches').value;
      doOuput('The answer is', userinches / 0.0833, ' ft');
    }

    function cm() {
      var userinches = document.getElementById('userinches').value;
      doOuput('The answer is', userinches * 2.54, ' cm');
    }

    function yards() {
      var userinches = document.getElementById('userinches').value;
      doOuput('The answer is', userinches / 0.02778, ' yard');
    }

    function doOuput(val, unit) {
      //console.log('Convert To ' + unit);
      document.getElementById('results').innerHTML = val + unit;
    }
  </script>
</div>

<div="buttons">
  <button type="button" onclick="feet();">Feet</button>
  <button type="button" onclick="cm();">Centimeters</button>
  <button type="button" onclick="yards();">Yards</button>
  </div>
  <!-- End of buttons div section -->

  <div id="results"></div>

Answer 3

Answer №2

Ensure Javascript is implemented within the <script> tag. It is recommended to utilize an external file as demonstrated below:

<script src="myscripts.js"></script>

Answer 4

Ensure Javascript is implemented within the <script> tag. It is recommended to utilize an external file as demonstrated below:

<script src="myscripts.js"></script>

Creating Functions with HTML, CSS, and Javascript

Answer №1

Answer №2

Similar questions

Displaying a background image in Laravel using the storage directory

Having difficulty receiving a response from an AJAX call within the success function

Is it possible to identify images within a message sent by users to the server and provide a response accordingly

Leveraging PHP variables to determine the image location, implement an onclick function to cycle through the image gallery

Troubleshooting the ThreeJs THREE.Mesh position problem

Loop through an array of objects in Node.js using ng-repeat

Unable to successfully change the Span Class

Using Twitter bootstrap with Node.js and Express framework

connect to new database using mysqli_find_cat

Create a unique V-MODEL for each index that I generate

Steps to incorporate / insert Angular directive in an application

I am currently experiencing some challenges with using jquery ajax post in conjunction with PHP

Guide on assigning a callback function in JavaScript

In pursuit of increased speed

php utilizing javascript to generate encrypted data for a hidden file

Manipulating Angular and Typescript to utilize the method's parameter value as a JavaScript object's value

Tips for incorporating AngularJS into a .php file when displaying a Laravel view

Update the content of a div and refresh it when a key on the keyboard is pressed

Which is better for creating hover effects: CSS3 or JavaScript?

Personalizing buttons on a carousel in React-bootstrap