Return value of an input

Question

I’m trying to get an input value on sweetalert2 trying to follow this example that is there on the site

const {value: password} = await Swal({
  title: 'Enter your password',
  input: 'password',
  inputPlaceholder: 'Enter your password',
  inputAttributes: {
    maxlength: 10,
    autocapitalize: 'off',
    autocorrect: 'off'
  }
})

if (password) {
  Swal('Entered password: ' + password)
}

Trying to use in my function, but with me shows an error message

"Uncaught Syntaxerror: await is only Valid in async Function"

So I’m trying to use:

$('.btn').on('click', function(){
  perguntaConcluirCompra1()
})
function perguntaConcluirCompra1(){
        
            swal({
                title: 'Forma de pagamento',
                width:'500px',
                html: "Escolha a forma de pagamento que melhor de convém" +
                    "<br>" +
                    '<button type="button" role="button" tabindex="0" class="SwalBtn1 customSwalBtnD" id="d">' + 'Dinheiro' + '</button>' +
                    '<button type="button" role="button" tabindex="0" class="SwalBtn2 customSwalBtnC" id="c">' + 'Cartão de Crédito' + '</button>'+
                    '<button type="button" role="button" tabindex="0" class="SwalBtn2 customSwalBtnCancel" id="cancel">' + 'Fechar' + '</button>',
                showCancelButton: false,
                showConfirmButton: false,
                onBeforeOpen: () => {
                    const content = Swal.getContent()
                    const $ = content.querySelector.bind(content)
                    const dinheiro = $('#d')
                    const credito  = $('#c')
                    const cancel = $('#cancel')
                    dinheiro.addEventListener('click', () => {
                         const {value: password} = await Swal({
                                                    title: 'Enter your password',
                                                    input: 'password',
                                                    inputPlaceholder: 'Enter your password',
                                                    inputAttributes: {
                                                        maxlength: 10,
                                                        autocapitalize: 'off',
                                                        autocorrect: 'off'
                                                    }
                                                    })

                                                    if ( password ) {
                                                    Swal('Entered password: ' + password)
                                                    }
                    })
                    credito.addEventListener('click', () => {
                        console.log('Credito: '+id);
                    })
                    cancel.addEventListener('click', () => {
                        console.log('cancelar ');
                    })
                }
            });
        
    }

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.32.2/sweetalert2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.32.2/sweetalert2.all.js"></script>

<button class="btn">Botao</button>

How do I get the value of this input?

Answer 1

As the error itself says:

"await is only valid in asynchronous functions"

In this case, just add async the function of the event click:

                                     ↓
dinheiro.addEventListener('click', async () => {...

• await
• asynchronous functions

Example:

$('.btn').on('click', async function(){
  perguntaConcluirCompra1()
})
function perguntaConcluirCompra1(){
        
            swal({
                title: 'Forma de pagamento',
                width:'500px',
                html: "Escolha a forma de pagamento que melhor de convém" +
                    "<br>" +
                    '<button type="button" role="button" tabindex="0" class="SwalBtn1 customSwalBtnD" id="d">' + 'Dinheiro' + '</button>' +
                    '<button type="button" role="button" tabindex="0" class="SwalBtn2 customSwalBtnC" id="c">' + 'Cartão de Crédito' + '</button>'+
                    '<button type="button" role="button" tabindex="0" class="SwalBtn2 customSwalBtnCancel" id="cancel">' + 'Fechar' + '</button>',
                showCancelButton: false,
                showConfirmButton: false,
                onBeforeOpen: () => {
                    const content = Swal.getContent()
                    const $ = content.querySelector.bind(content)
                    const dinheiro = $('#d')
                    const credito  = $('#c')
                    const cancel = $('#cancel')
                    dinheiro.addEventListener('click', async () => {
                         const {value: password} = await Swal({
                                                    title: 'Enter your password',
                                                    input: 'password',
                                                    inputPlaceholder: 'Enter your password',
                                                    inputAttributes: {
                                                        maxlength: 10,
                                                        autocapitalize: 'off',
                                                        autocorrect: 'off'
                                                    }
                                                    })

                                                    if ( password ) {
                                                    Swal('Entered password: ' + password)
                                                    }
                    })
                    credito.addEventListener('click', () => {
                        console.log('Credito: '+id);
                    })
                    cancel.addEventListener('click', () => {
                        console.log('cancelar ');
                    })
                }
            });
        
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.32.2/sweetalert2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.32.2/sweetalert2.all.js"></script>

<button class="btn">Botao</button>