Difficult exam question that is challenging me

Struggling with a mock exam assignment here - trying to create a conversion program from wind speed in meters per second to watts per hour. I've set up a chart with different ranges of m/s to watts, but for some reason, it's not working as expected. It's probably just a silly mistake on my end, so any help would be greatly appreciated :)

<!DOCTYPE html>
<html>
  <head>
    <meta charset:"utf-8">
    <title>Exam Challenge</title>
  </head>
  <body>
    <h2>m/s --> w/h</h2>
    <input type="number" id="alfa" placeholder="Enter here" autocomplete="off"><button id="knapp">Calculate</button>
    <div id="result">
    </div>
    <script>
      var alfa=document.getElementById("alfa");
      var result=document.getElementById("result");
      function convert() {
        var speed=Math.round(alfa).toFixed(1);
        if (speed >= 0 && speed <= 1.5) {
                result.innerHTML+="0 watt per hour";
            }
            else if (speed >= 1.6 && speed <= 3.3) {
                result.innerHTML+="2 watt per hour";
            }
            else if (speed >= 3.4 && speed <= 5.4) {
                result.innerHTML+="10 watt per hour";
            }
            else if (speed >= 5.5 && speed <= 7.9) {
                result.innerHTML+="60 watt per hour";
            }
            else if (speed >= 8 && speed <= 10.7) {
                result.innerHTML+="150 watt per hour";
            }
            else if (speed >= 10.8 && speed <= 13.8) {
                result.innerHTML+="400 watt per hour";
            }
            else if (speed >= 13.9 && speed <= 17.1) {
                result.innerHTML+="500 watt per hour";
            }
            else if (speed >= 17.2) {
                result.innerHTML+="0 watt per hour";
            }
            else {result.innerHTML+="Answer cannot be provided"}
      }
      knapp.onclick=convert;
    </script>
  </body>
</html>

Answer №1

The reason it's not functioning properly is because you're not extracting the real value from the "alfa" variable.

To fix this, simply update the following line in your "over" function:

var vind=Math.round(alfa).toFixed(1);

to:

var vind=Math.round(alfa.value).toFixed(1);

By making this adjustment, the function will work correctly as you'll be rounding the actual value instead of the HTML element associated with the input.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using jQuery, it is possible to eliminate a div element without affecting its contents

<div class="a"> <div class="b"> <ul> <li>Element A</li> <li>Element B</li> </ul> </div> </div> How can I eliminate div class="b" solely? I require the presence of div a, u ...

What is the best way to convert HTML into a React component?

This is the situation I am facing : 1) The application requests a CMS (Content Management System) for page contents. 2) The CMS responds with "<div>Hi,<SpecialButton color="red">My Button</SpecialButton></div>" 3) The applicat ...

Resolving the Persistence Problem of Navigation Bar Fading In and Out

I've been struggling for hours trying different methods to achieve the desired outcome, but unfortunately, none of them have worked as expected. My goal is simple: I want the fixedbar to fade in when the scroll position exceeds the position of the ph ...

Automated suggest feature similar to Stack Overflow's tag completion

Can you explain the concept behind using a tagging system similar to Stack Overflow? Specifically, I am interested in the front-end implementation. Are there any specific libraries that offer features such as auto-complete and tag separation, similar to ...

What is the rationale behind setting the argument rv to zero in the make_response function within the Flask Python file app.py?

I have been working on a project where I take input numbers from a flask website and feed them into a neural network. The outputs are then stored in a dictionary which is displayed on a result page with a table. Below is the relevant code snippet for Fla ...

Unable to add JSON data to Javascript List Object? Consider using a combination of Node.JS and Firebase for a

router.get('/getMeals',function(req,res){ var mealsList = []; mealsList.push("bar"); mealsRef.on("value",function(data){ data.forEach(function(child){ console.log(child.val()); var newMeal = child ...

Attempting to initiate an AJAX request to an API

Hey everyone, I've been working on making an AJAX API call to Giphy but I keep receiving 'undefined' as a response. Can anyone offer some advice on how to troubleshoot and fix this issue? Thanks in advance for your help! var topics = ["Drak ...

The Boostrap Datepicker fails to display

I'm having trouble integrating a Bootstrap Datepicker into my form. I got it working outside of the form, but when I try to include the code in my form, it doesn't seem to work. All necessary files are present and the code is identical. <!D ...

Is there a way to design a side menu navigation bar that reveals items by sliding them out to the right?

Currently, I am attempting to emulate a website as practice since I am relatively new to HTML, CSS, and JavaScript. As part of this exercise, I have designed a navigation bar on the left side (similar to the example provided for food items). The objectiv ...

Setting the height of a child tag: A step-by-step guide

When trying to set the height of a child tag to 100%, I encountered an issue where the height would remain fixed after redirecting to another page, preventing the page from scrolling. Styling for Image 1 body{ background: url("Resources/Cash.jpeg&q ...

Mastering Light and Camera Selection in Three.js

Question, In the editor found at this link, you can click on a light or camera to select it. I am familiar with using raycaster.intersectObjects(objects) to select meshes, but how can I achieve the same result for lights and cameras which do not have mesh ...

In an environment with Internet Explorer 8, is it possible to use CSS web fonts in the WOFF file format?

Looking to use web fonts on Explorer 8 but having issues with my woff file not being applied as the font for the webpage. Any solutions to this problem? ...

What is the best way to add an image to a SVG placeholder?

This is all unfamiliar territory for me. I am experimenting with the Bootstrap template named "Carousel" as my starting point, utilizing Bootstrap 5.3.2. Here is the link to the Carousel example Everything seems fine so far. However, I am struggling to l ...

Dynamically created span element in script facing issues in MVC application

I have a single MVC project where, in the BusinessPosition.cshtml file, I am dynamically creating a tree view at runtime. By default, it displays the main child of the root node upon page load, like this: <ul class="col-lg-20 col-sm-12 col-xs-12" style ...

Is there a way to create a fading effect for background images using jQuery?

Is there a way to animate the background-image of an element with fadein and fadeout effects on hover? ...

Engage with React JS arrays of objects

I have a specific object structure that looks like the following: [ { "periodname": "Test", "periodtime": "" }, { "periodname": "", "periodtime&quo ...

Angular 4 Form remains valid even when an incorrect value is entered

Within my Angular 4 project, I encounter the issue of controlling input fields in multiple forms. Specifically, I need a mechanism to disable the save button if the input value is incorrect. For example, when I require an input field to only accept positi ...

Issue with Firefox: During drag events, dataTransfer.files return as null, while this behavior is consistent in all other browsers

Take a look at this jsfiddle to see the exact issue in action. In my experience, the 'dragenter' event dataTransfer.files works correctly in all browsers except for Firefox. However, I have noticed that the 'drop' event consistently pr ...

Create a dynamic 3D model of the human body using JavaScript, AngularJS, or Three.js with

Looking to develop an interactive 3D human model that allows users to input data by clicking on various body parts. Interested in exploring capabilities using JavaScript, AngularJS or Three.js. ...

Is it possible for an onclick attribute to assign a function to document.getElementById without overwriting the existing value?

I want to create a numeric keypad in HTML with numbers 1-9, and I'm unsure if JavaScript can handle an onclick function for each key to show the number in the display div. What would be the most effective way to achieve this? <div id="display"> ...