CODEWITHSUNDEEP
javascriptjquery
Dan
Dan

Reputation: 13

How can I fix this JS to jQuery conversion? (re: checkbox and dropdown option selection)

For practice, I'm taking working JavaScript code and converting what I can to jQuery. I've gone through StackOverflow and the jQuery documentation and am not finding what I need. Here's my original/working JS snippet:

    if (checkbox.checked) {
        let prefixmenu = document.getElementById('prefix_menu');
        let prefix = prefixmenu.options[prefixmenu.selectedIndex].text;
        para.textContent = prefix + " " + output;
    } else {
        para.textContent = output;
    }

Without overloading you with the rest of the code, the goal is to take two form inputs, and an optional prefix (selected from a dropdown menu if a checkbox is checked), and generate those with pre-fabricated text in a 'clickbait headline generator.'

I've searched through this site and the jQuery documentation and have found things I thought might work but haven't. I tried this but then nothing prints:

if $("#checkbox :checked")

I thought this solution would work based on my research:

    if ($checkbox.checked) {
        let $prefix = $("#prefixmenu option:selected").text();
        $para.text($prefix + " " + output);
    } else {
        $para.text(output);
    }
})

From that, I get the pre-fab text with the form inputs to print, but not the prefix. I'm not sure what I'm missing.

            <fieldset>
                <legend>Generator inputs</legend>
                <input type="checkbox" id="checkbox" value="prefix-select" name="optional_prefix">
                <label for="prefix">Select to include a prefix</label><br>
                <label for="prefix_menu">Prefix Selection:</label>
                <select id="prefix_menu">
                    <option value="1">BOOM!</option>
                    <option value="2">WOW!</option>
                    <option value="3">EPIC!</option>
                </select>
                <label for="yourname">Your name</label>
                <input type="text" id="yourname">
                <label for="othername">Another person's name</label>
                <input type="text" id="othername">
                <button type="button" id="genButton">Generate!</button>
            </fieldset>

Upvotes: 1

Views: 369

Answers (1)

showdev
showdev

Reputation: 29188

One issue is that you're selecting $("#prefixmenu"), but the element's ID is "prefix_menu" (with an underscore). Use $("#prefix_menu") to access that element.

Also, checked is a property of the DOM element. $('#checkbox') is a jQuery object, which doesn't have a checked property of its own. However, you can access the DOM properties of selected elements with jQuery's .prop() method:

$checkbox.prop('checked')

Or you can access the property of the first DOM element directly:

$checkbox[0].checked

Or you can test against the :checked CSS pseudo-class using jQuery's is() method:

$checkbox.is(':checked')

Here's a working demonstration:

let $checkbox = $('#checkbox');
let $prefixMenu = $("#prefix_menu");
let $genButton = $("#genButton");

$genButton.on('click', function() {
  let output = 'output';
  if ($checkbox.is(':checked')) {
    let prefix = $("option:selected", $prefixMenu).text();
    output = prefix + " " + output;
  }
  console.log(output);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
  <legend>Generator inputs</legend>
  <input type="checkbox" id="checkbox" value="prefix-select" name="optional_prefix">
  <label for="prefix">Select to include a prefix</label><br>
  <label for="prefix_menu">Prefix Selection:</label>
  <select id="prefix_menu">
    <option value="1">BOOM!</option>
    <option value="2">WOW!</option>
    <option value="3">EPIC!</option>
  </select>
  <label for="yourname">Your name</label>
  <input type="text" id="yourname">
  <label for="othername">Another person's name</label>
  <input type="text" id="othername">
  <button type="button" id="genButton">Generate!</button>
</fieldset>

These examples from .prop() further help to visualize those concepts:

if ( elem.checked )
if ( $( elem ).prop( "checked" ) )
if ( $( elem ).is( ":checked" ) )

Edit

I might use ternary operators to define the values:

let $checkbox = $('#checkbox');
let $prefixMenu = $("#prefix_menu");
let $genButton = $("#genButton");
let output = 'Output';

$genButton.on('click', function() {

  let prefix = $checkbox.is(':checked')
    ? $("option:selected", $prefixMenu).text()
    : false;

  let headline = prefix
    ? prefix + " " + output
    : output;

  console.log(headline);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
  <legend>Generator inputs</legend>
  <input type="checkbox" id="checkbox" value="prefix-select" name="optional_prefix">
  <label for="prefix">Select to include a prefix</label><br>
  <label for="prefix_menu">Prefix Selection:</label>
  <select id="prefix_menu">
    <option value="1">BOOM!</option>
    <option value="2">WOW!</option>
    <option value="3">EPIC!</option>
  </select>
  <label for="yourname">Your name</label>
  <input type="text" id="yourname">
  <label for="othername">Another person's name</label>
  <input type="text" id="othername">
  <button type="button" id="genButton">Generate!</button>
</fieldset>

Upvotes: 1

Related Questions