What steps should I take to troubleshoot the JavaScript dropdown list on my webpage

I'm having some trouble with my dropdown list code. My goal is to be able to select an option from the list and have it display an image with some text, but I seem to be missing something. Here's what I have so far:

<form action="">
 
  <select id="cars">
    <option value="1" href="https://i.imgur.com/sXWdODh.jpg">Ford Mustang</option>
    <option value="2">Mercedes E400</option>
    <option value="3">Chevy Camaro SS</option>
    <option value="4">Honda Civic</option>
    <option value="5">Tesla Model X</option>
  </select>
</form>

<br>
<button type="button" onclick="showcars()">Submit</button>
<button type="button" onclick="myFunction()">Reset</button>


   <script>
        function showcars(){
      
    var select = document.getElementById("cars");
      
    var carName = select.value;
      
    document.write(carame);
}
        </script>
<script>
function myFunction() {
  document.getElementById("2").value = "honda";
}
  document.getElementById("1").src = "fordmustang";

</script>




</body>
</center>    
<br>
<br>
</html>

Answer №1

To provide better assistance, please clarify your goals and what specific issue you are facing.

However, there appear to be a few errors in the code that could be causing issues:

document.write(carame); 

should actually read as:

document.write(carName);

Additionally,

document.getElementById("1").src = "fordmustang";

needs to be moved inside myFunction() for it to work properly. Make sure it is placed within the closing bracket.

By correcting these errors, your code should run without any problems.

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

Tips for displaying a resolved promise in React js after using the `then` method

While working with promises, I encountered this error: Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous task ...

Creating a Full Height Layout with Two Columns Using Bootstrap 4

Looking for a solution similar to the one discussed in this thread. I'm struggling to figure out how to achieve the layout shown below using Bootstrap 4. The key requirement is that col 1, col 2, and col 3 must stretch to the bottom of their respecti ...

Adding a property conditionally in jsx: A guide

I have a simple example of Material UI RadioGroup code that I want to display conditionally in either a row or column format. By default, it is displayed in column format. Below is the code snippet: <RadioGroup aria-label="gender" name=&q ...

Validating data with Joi can result in multiple error messages being displayed for a single field

I'm attempting to implement a validation flow using the joi package, which can be found at https://www.npmjs.com/package/joi. 1) First, I want to check if the field category exists. If it doesn't, I should display the error message category requ ...

Learn how to dynamically switch the background image of a webpage using a button in AngularJS

Hey there, I'm currently working on incorporating interactive buttons into my website to give users the ability to customize the background. I've been experimenting with Angular to achieve this feature. So far, I've managed to change the ba ...

Dynamic change in the mutation observer is not causing the callback to trigger

I have created a nested structure with two <div> elements. I am monitoring changes in the width of the inner <div>, which is set to width:auto;. Despite adjusting the width of the parent <div>, the mutation observer callback doesn't ...

Preventing the use of special characters in URLs using JavaScript

I have a treeview where I am dynamically adding nodes and attaching a JavaScript click function to each node. The issue is with the use of the escape function on the url values stored in thisFileNode.Value. Even after using the escape function in my code, ...

Utilize Bootstrap 4's d-print classes to style your form

After creating a form that allows users to submit online or print and mail, I encountered an issue with the printing functionality. When using a simple JavaScript print command and applying the .d-print-none class to hide all elements except the form for p ...

The 3D Circle Flip feature on a certain webpage designed by Nordstrom is experiencing issues when viewed on Firefox

Click here to see a 3D Circle Flip effect. It works correctly in Chrome, but in Firefox the text does not change when flipping. ...

Steps to initiate my selenium-standalone server: Execute the command "selenium-standalone start"

I'm currently facing a challenge while trying to execute a test script in WebDriverIO. After cloning the code from wdio-cucumber-framework, I am unable to get selenium-standalone to start properly. The error message indicates an issue with geckodriv ...

Discover the best practices for utilizing FBInstant.updateAsync within your Facebook Instant Game

I'm a beginner in instant games and I'm looking for guidance on how to use them. FBInstant.updateAsync({ action: 'CUSTOM', cta: 'Join The Fight', image: base, template: 'play_turn', text: 'P ...

The .load() function seems to have a problem with my slider widget

I am facing an issue with a slider on my page that displays posts from a specific category. When the user clicks on "next category", the content slides to the left and new content is loaded along with its respective slider. The problem arises when the loa ...

Modifying HTML content through JSP file

I'm facing a challenge with implementing a specific functionality. My goal is to display the contents of a svn repository in a TreeView. I have a Java Class that connects to the repository and stores the contents in my Java DataModel. In my .jsp file ...

"React Antd Element Type Validation Failure: received an unexpected object instead of the required element type. Issue

I recently upgraded from antd version 3.7.0 to the latest version 3.23.4 and now I'm encountering a strange error: Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite co ...

Trigger Knockout bindings once the ajax request has been completed

In the view, I have the following script: <script> MyObj.initModel(getUrl); $(document).ready(function () { ko.applyBindings(MyObj.viewModel, document.getElementById("someId")); ...

What is the best way to position a button at the bottom of an image?

I am facing an issue with the following code snippet: * { box-sizing: border-box; } .wrapper { position: relative; /* border:1px solid blue; */ width: 250px; } .text { position: absolute; border:1px solid red; bottom: 0px; ...

Angular 2 dropdown list that allows users to add a personalized value in the HTML code

Here is the scenario I am dealing with We are displaying a fixed dropdown list to the user For example, a dropdown list has 4 options such as apple, orange, grape, pineapple and 'create your own' If the user is not satisfied with the provided ...

What is the best way to transmit error messages from the server to the client?

I am currently working on my express server and I have a query regarding how to efficiently communicate error messages to the client side. My goal is to display the error message both on the client console as well as on the server console, but I am uncerta ...

Unable to retrieve a collection within Angular-Meteor framework

I'm currently facing challenges while working with data from a Collection in Angular-Meteor as I struggle to access it successfully. Inside lib/collections.js, I have defined the collection: UserMeta = new Mongo.Collection('userMeta'); In ...

"Here's how you can mark an option as selected in Angular, either from the component or the HTML file

When it comes to my form, I have a select menu that sends data to an SQL database and then fetches it back when it is called for editing. The value being edited should be displayed in the select menu option as selected. Here's a peek at my code: < ...