Help with Javascript! Newbie

JavaScript
1

The whole thing between "[code /code] is the code. I need help with moving phone 2 over to the right side of the page along with phone 2’s data otherwise you cant read anything. I am also fairly new at this stuff so any other feedback will help !! thanks a lot !

var phone1 = '';

var phone2 = '';

var token = '345b708533643535a379b973e92df452ce85894ab48f02d9';

var data = "{}";

phone1 = document.getElementById('phone1');

phone2 = document.getElementById('phone2');

function getSpecs(phone, tableNumber) {

    var url = 'https://fonoapi.freshpixl.com/v1/getdevice?device=' + phone + '&token=' + token;
    var xhr = new XMLHttpRequest();

    xhr.open('GET', url);
    xhr.send(data);

    xhr.onload = function() { 
        if (xhr.status === 200) {
            responseObject = JSON.parse(xhr.responseText);

            var newContent = '';
            for (var i = 0; i < responseObject.length; i++) {
                newContent += '<table>';
                newContent += '<table><tr><td><strong>Device Name</strong></td></tr></table>';
                newContent += '<td>' + responseObject[i].DeviceName + '</td></tr>';
                newContent += '<table><tr><td><strong>Size</strong></td></tr></table>';
                newContent += '<td>' + responseObject[i].size + '</td></tr>';
                newContent += '<table><tr><td><strong>Camera</strong></td></tr></table>';
                newContent += '<td>' + responseObject[i].primary_+ '</td></tr>';
                newContent += '<table><tr><td><strong>Bluetooth</strong></td></tr></table>';
                newContent += '<td>' + responseObject[i].bluetooth + '</td></tr>';
                newContent += '<table><tr><td><strong>Colors</strong></td></tr></table>';
                newContent += '<td>' + responseObject[i].colors + '</td></tr>';
                newContent += '</table>';
            } 
            

            //Using table number so that the innerHTML call does not overwrite content
            document.getElementById('table-container-' + tableNumber).innerHTML = newContent;
        }
    };
}

$( document ).ready(function() {
    $('#submitButton').on('click', function(e) {
        e.preventDefault();
        phone1 = $('#phone1').val();
        phone2 = $('#phone2').val();
        // Added table number to populate two tables
        getSpecs(phone1, 1);
        getSpecs(phone2, 2);
    });
})
2

Without seeing the HTML code, or any relevant CSS, it’s kinda tricky to say how to do what you’re asking for. If it’s simply a visual adjustment of the phone2 page element(s), then you’re going to want to look into CSS. Presumably, you’re wanting to move the second table (or likely the div CONTAINING the second table) to an alignment below the first table?

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.