Firebase not storing the value of my <p> tags.


  • I'm trying to understand why Firebase is only able to extract the contents of the story field, but none of the <p> tags. It logs them as blank strings "". Any ideas? jQuery is selecting a unique id from each <p> tag, which gets generated by using a for loop to iterate through an object array. When I click the Story Submit button, it should capture these details. Here is the order of my code relevant to this problem:

    JAVASCRIPT CODE

    (Firebase config data omitted from post)

    firebase.initializeApp(firebaseConfig);
    
    var database = firebase.database();
    $('#storySubmit').on('click', () => {
        event.preventDefault();
        alert("Submit clicked");
        let story = $('#storyField').val().trim()
        let setting = $('#loop-info-1').val().trim()
        let firstPlotPoint = $('#loop-info-2').val().trim()
        let midPoint = $('#loop-info-3').val().trim()
        let climax = $('#loop-info-4').val().trim()
        getWordCount(story)
    
        database.ref().push({
            story: story,
            setting: setting,
            firstPlotPoint: firstPlotPoint,
            midPoint: midPoint,
            climax: climax
        });
    })
    
    let action = new getGenre(
        'A desolate wasteland',
        'A lone man struggles to make his way through the wastes in search of his estranged family',
        'Lone man meets enemy',
        'Man defeats battle in close battle that leaves him scarred mentally and physically')
    let horror = new getGenre(
        'A haunted mansion',
        'A woman receives a message from someone who she thinks is still alive',
        'Woman goes to investigate mysterious message',
        'Woman encounters and confronts evil that exists within the mansion')
    let scifi = new getGenre(
        'A derelict spaceship',
        'An astronaut wakes up in stasis to find hes the lone survivor on a mining vessel',
        'He discovers can alien force has massacred his crew and left him alive, but for what reason?',
        'Discovers reason, conflict resolution')
    let mystery = new getGenre(
        'Rural America, 1930',
        'A man who does not age seeks to find out why after being alive for more than 200 years',
        'He discovers one of his family members was a witch and cursed him with immortality',
        'Resolves the immortality and finally dies')
    
        $('#action').on('click', () => {
            //     $('#loop-info-1').text(getActionSetting())
            //    $('#loop-info-2').text(getActionPlot_1())
            loop(action)
    
    loop = (genre) => {
        let values = Object.values(genre)
        console.log("loop is being called...");
        console.log(values);
        console.log(" ");
        console.log(" ");
        for (let value of values) {
            $('#loop-info-1').text(values[0])
            $('#loop-info-2').text(values[1])
            $('#loop-info-3').text(values[2])
            $('#loop-info-4').text(values[3])
        }
    }
    

    HTML CODE
    (This is where the value of the content is being populated and pushed to Firebase)

    <p><strong>Setting</strong></p>
    <div class="card mb-3">
        <div class="card-body text-primary">
           <textarea id="settingField" class="form-control"></textarea>
            <p class="card-text" id="loop-info-1"></p>
        </div>
    </div>
    
    <p><strong>First Plot Point</strong></p>
    <div class="card mb-3">
        <div class="card-body text-primary">
            <textarea id="firstPlotPointField" class="form-control"></textarea>
            <p class="card-text" id="loop-info-2"></p>
        </div>
    </div>
    
    <p><strong>Midpoint</strong></p>
    <div class="card mb-3">
        <div class="card-body text-primary">
            <textarea id="midpointField" class="form-control"></textarea>
            <p class="card-text" id="loop-info-3"></p>
    </div>
    
    <p><strong>Climax</strong></p>
    <div class="card mb-3">
        <div class="card-body text-primary">
            <textarea id="climaxField" class="form-control"></textarea>
            <p class="card-text" id="loop-info-4"></p>
        </div>
    </div>


  • Hey @Cairoshock

    Assuming you are going to have content inside the p elements like the one below

     <p class="card-text" id="loop-info-2"></p>
    

    You can retrieve the content of it using .text() instead of .val()

    However If you want to get the content of the textarea

    <textarea id="firstPlotPointField" class="form-control"></textarea>
    

    You would use .val() instead.

    Getting content and values can get confusing. Just be aware that there are vanilla javascript solutions and jQuery ones. Additionally be aware that there is a .val(), .text() and .html() method. They do similar things but they are not the same.

    I hope this worked and helped your understanding better.



  • Hey @Cairoshock

    Assuming you are going to have content inside the p elements like the one below

     <p class="card-text" id="loop-info-2"></p>
    

    You can retrieve the content of it using .text() instead of .val()

    However If you want to get the content of the textarea

    <textarea id="firstPlotPointField" class="form-control"></textarea>
    

    You would use .val() instead.

    Getting content and values can get confusing. Just be aware that there are vanilla javascript solutions and jQuery ones. Additionally be aware that there is a .val(), .text() and .html() method. They do similar things but they are not the same.

    I hope this worked and helped your understanding better.



  • @avan said in Firebase not storing the value of my <p> tags.:

    However If you want to get the content of the textarea
    <textarea id="firstPlotPointField" class="form-control"></textarea>

    You would use .val() instead.
    Getting content and values can get confusing. Just be aware that there are vanilla javascript solutions and jQuery ones. Additionally be aware that there is a .val(), .text() and .html() method. They do similar things but they are not the same.
    I hope this worked and helped your understanding better.

    This worked! Thank you again!