Course Build Dex with JS - chapter GET QUOTE FORM

Javascript Programming
#1

Hiya,I am doing something wrong and cant figure out what, pls help ,thank you. I am getting this form :

Screenshot 2022-02-24 at 18-28-26 DEX APP
Screenshot 2022-02-24 at 18-28-26 DEX APP859×173 4.16 KB

instead of this :

image
image680×543 101 KB

here is the function rendering the form:

 function renderForm(tokens) {
        const options = tokens.map(token => 
                `<option value="${token.address}">${token.name} (${token.symbol})</option`)
        console.log(tokens);
        console.log(options.join(''));
        document.querySelector('[name=from-token]').innerHTML = options;
        document.querySelector('[name=to-token]').innerHTML = options;

and here is the html form:

<form action="#" method="POST" class ="exchange-form" >
           <div class="form-row">
                <label>
                From:
                <select name="from-token"></select>
              
                </label>

           </div>
                      
           <div class="form-row">
                <label>
                To__:   
                <select name="to-token"></select>
                </label>

           </div>  
                                  
            <div class="form-row">

                <button type="submit" class="js-submit-quote">GET QUOTE</button>  

            </div>           

        </form>
#2

The option is an array, So you should change that to string.

document.querySelector('[name=from-token]').innerHTML = options..join('');
        document.querySelector('[name=to-token]').innerHTML = options.join('');

The join() creates and returns a new string by concatenating all of the elements in an array.

1 Like
#3

Hi Maki,appreciate it. thank you. it works now. great job.have a nice day.K.

1 Like