get value of [object HTMLDivElement]

Question

I am trying to make my son a spelling quiz. I want to enter his weekly words in mysql with id, word, and weekNo fields I am using a js text to speech to say the word, and he types it into a textbox. After he submits it there is a function to check if it is correct, then the next word in the mysql row is spoken. I am getting the next row with...

     $.ajax({
       type: "POST",
       url: "getNext.php",
       data: "count=" + $number,
       success: function(results){
         $('#results').append(results);
       }
     });

getNext.php

    $result = mysql_query("SELECT * FROM spelling LIMIT 
    {$_POST['count']},1");
    while($row = mysql_fetch_array($result))
    {
    echo "<div class='result'>".$row['word'] ."</div>";
    }

On the index.php I can display $row['word'] one by one on submit with

    <div id='results'></div>

My problem is I don't know how to get the value from the ajax call into the TTS, everything I try it says "object HTMLDivElement"

Here is the line where I need to get the ajax value...

    var message = new SpeechSynthesisUtterance(AJAX.VALUE.HERE);

To make things easier, your API endpoint should really return a JSON or XML file which is easy to parse and use. — Derek 朕會功夫, Nov 16 '17 at 05:01
Try to put `console.log(results)` in `success` function and check what is printing in the console elements. It will display tree node and you can able to access the value you want easily. — Sathvik Chinnu, Nov 16 '17 at 05:11
Show your whole code if you don't know where the problem is. — Ritesh Khatri, Nov 16 '17 at 07:12

score 1 · Answer 1 · answered Nov 16 '17 at 05:12

1

According to my guess, you are getting the response from ajax that is an html tag with id="result". You may get the actual value by ajaxResponse.innerText

In other way, if you are getting output as 'object HTMLDivElement' then that is a div element, and it has property innerText to access its value so final code would be

var message = new SpeechSynthesisUtterance(AJAX.VALUE.HERE.innertText);

answered Nov 16 '17 at 05:12

Prakash GPz

1,675
4
16
27

.innerText solved, thanks! More on how javascript obfuscates .value : https://stackoverflow.com/questions/24427621/innertext-vs-innerhtml-vs-label-vs-text-vs-textcontent-vs-outertext – gherson Apr 20 '19 at 17:12

score 0 · Accepted Answer · answered Nov 16 '17 at 05:11

0

I would suggest to output the exact word from Next.php

echo $row['word'];

Do the decoration in javascript when you get the response.

success: function(result){
     var word = $.trim(result); // You can use this in your speech engine.
     var wordHtml = "<div class='result'>"+ word + "</div>"; // adding div decoration in JS
     $('#results').append(wordHtml);
   }

answered Nov 16 '17 at 05:11

Subir Kumar Sao

8,171
3
26
47

Thank you! I was able to get it working with your suggestion. – mark2326 Nov 16 '17 at 18:51

score 0 · Answer 3 · answered Nov 16 '17 at 05:27

I wirte a php test file of your case:
the html file:

<html>
<head>
        <script src=".../jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
<body>
        <button onclick="a()" name="getdata">getdata</button>
        <div id="results"></div>
        <script type="text/javascript">
                function a(){
                        $.ajax({
                       type: "POST",
                       url: "getdata.php",
                       success: function(results){
                         $('#results').append(results);
                       }
                     });
                }
        </script>
</body>
</html>

the getdata.php file:

<?php
echo 1111;

So ,I think you problem is at the data formate that your php file returned. You can just return json data, and make the html element in your html file.

get value of [object HTMLDivElement]

3 Answers3