Question 251533 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to add a fontawesome icon in html according to the value of an input

Sorry if my question seems stupid as I am a total newbie.

I’m stuck with the following problem.

I need to add a fontawesome icon as the content of an input text according to a very simple condition defined by "if" as follows :

From the js file :

if (eval(form.current_weather.value)==1) { tag_box = HERE_I_need_to_place_a_fontawesome_icon1; } 
else if (eval(form.current_weather.value)==2) { tag_box = HERE_I_need_to_place_a_fontawesome_icon2; } 
else {  tag_box1 = ""; }

From the html code :

Weather <select name="current_weather">
<option value="1">Rainy</option>
<option value="2">Cloudy</option>
<option value="3">Sunny</option>
</select>

I have the variable current_weather which is selected from a dropdown in html. Then, according to the entry selected from this dropdown, the variable tag_box will display a different fontawesome icon (#1 or #2) or no icon.

I really don’t know how to achieve this. I spent hours trying to understand javascript and testing with classes, remove.class etc but it is a total failure.

Could anyome help me with this, at least some advice. I would have preferred to use PHP but the get and post functions don’t return anything which is obvious actually.

Thanks in advance.

Regards.

Tags:

3

Answers


  1. 0

    please provide a screenshot or something so your problem is more understandable

    Login or Signup to reply.
  2. 0

    Don’t worry, your question is not stupid at all, and it’s great that you’re trying to learn and solve a problem. To dynamically change the content of an input text based on the selected option in a dropdown and show FontAwesome icons accordingly, you can follow these steps using JavaScript:

    1. Include FontAwesome in your HTML: Make sure you have included the FontAwesome library in your HTML file. You can do this by adding the following line in the <head> section of your HTML file:
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

    This will load the FontAwesome library, which provides a wide range of icons.

    1. Modify your JavaScript code: Update your JavaScript code to set the appropriate FontAwesome icon based on the selected option in the dropdown. Here’s the updated code:
    // Get the <select> element
var selectElement = document.querySelector('select[name="current_weather"]');

// Get the <input> element where you want to display the icon
var tagBox = document.getElementById('tag_box');

// Add an event listener to the <select> element
selectElement.addEventListener('change', function () {
    var selectedValue = parseInt(selectElement.value);

    if (selectedValue === 1) {
        tagBox.innerHTML = '<i class="fas fa-cloud-rain"></i>'; // FontAwesome icon for rainy
    } else if (selectedValue === 2) {
        tagBox.innerHTML = '<i class="fas fa-cloud"></i>'; // FontAwesome icon for cloudy
    } else {
        tagBox.innerHTML = ''; // Clear the content if the value is not 1 or 2
    }
});
    1. Update your HTML: Make sure you have an <input> element with the id "tag_box" where you want to display the FontAwesome icon:
    Weather <select name="current_weather">
    <option value="1">Rainy</option>
    <option value="2">Cloudy</option>
    <option value="3">Sunny</option>
</select>

<input type="text" id="tag_box">

    Now, when you select an option from the dropdown, the corresponding FontAwesome icon will be displayed in the input text box. If the selected option is not 1 or 2, the input box will be cleared.

    Remember to adjust the icon classes in the JavaScript code to match the specific icons you want to use from FontAwesome. In this example, I used "fas fa-cloud-rain" for a rainy icon and "fas fa-cloud" for a cloudy icon. You can find more icons on the FontAwesome website and customize the icons as needed.

    Login or Signup to reply.
  3. 0

    Same answer as @MH BIPUL but in Jquery,

    You can download jquery from here (if you don’t have it aleady):
    https://jquery.com/download/

    in you .html file (just befor the tag closing):

    <script src="<path to jquery.min.js>"></script>

<script type="text/javascript">
let weatherSelector = $('select[name="current_weather"]');

weatherSelector.on('change', () =>
{
    let tagBox = $('#tag_box');
    let selectedValue = parseInt(this.value);

    if (selectedValue == 1)
        tagBox.find('i.fas').addClass('fa-cloud-rain').removeClass('fa-cloud');
    else if (selectedValue == 2)
        tagBox.find('i.fas').addClass('fa-cloud').removeClass('fa-cloud-rain');
    else
        tagBox.find('i.fas').removeClass('fa-cloud fa-cloud-rain');

});
</script>

    This code can still be adjusted based on your senario.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search