document.getElementsByClassName返回未定义

Question

• When I run this function below I get an undefined for the variable body . I have tried other approches like changing from document.getElementsByClassName(review).value to document.getElementsByClassName(review)[0].value and this gives me a null
• have equally tried changing the Dom identification method to id like so document.getElementByid(review).value and still get a null

// this the java script function  
function review(elem, star, review, vend_id)
{
  document.getElementById(elem).innerHTML = 'Sending review... ';
  console.log(review);
  console.log(elem);
  var review_box = 'review_body'+vend_id;
  console.log(review_box);
  var star = document.getElementsByClassName(star).value;
  var body = document.getElementsByClassName(review).value;
  console.log(body);
  xhttp.onreadystatechange = function(){
        if ( this.readyState == 4 && this.status == 200) {
            document.getElementById(elem).innerHTML = this.responseText;           
        }
      };

      xhttp.open("GET", "event_menu_file/vendor_review.php?star="+star+"&body="+body+"&reviewer_id="+user_id+"&event_id="+event_id+"&vendor_id="+vend_id, true);
      xhttp.send();
}

This is the php that prints the html document that the javascript works with

if ($vendor_list_query) 
{   
    while ($vendor_list_result = $vendor_list_query->fetch_assoc()) 
    {
      $vend_id = $vendor_list_result['vendor_id'];

      echo '<div class="reviewBlock">';
      $reviewed_before = $mysqli->query("SELECT id FROM vendor_rating WHERE event_id = '$id' AND vendor_id = '$vend_id' AND rater_id = '$user_id' ")->num_rows;

      echo '<div class="reviewsclass" id="reviewid'.$vend_id.'">';

            if ($reviewed_before < 1) {reviewer($vend_id);}

      review_lister($mysqli, $id, $vend_id, $user_id);
      echo '</div>';// end of the reviewsclass
      echo '</div>';//end of the reviewBlock

    }        
}
else
{
    echo "event evendor list has a minor error".$mysqli->error;
}

function reviewer($vend_id)
{

$star = '<img srcset="star.png" src="star.svg" width="16px" height="16px" onclick="star('.$vend_id.', 1)">
         <img srcset="star.png" src="star.svg" width="16px" height="16px onclick="star('.$vend_id.', 2)">
         <img srcset="star.png" src="star.svg" width="16px" height="16px" onclick="star('.$vend_id.', 3)">
         <img srcset="star.png" src="star.svg" width="16px" height="16px" onclick="star('.$vend_id.', 4)">
         <img srcset="star.png" src="star.svg" width="16px" height="16px" onclick="star('.$vend_id.', 5)">';

  $output = '<div id="v_review_box'.$vend_id.'">';
  $output .= '<div id="rating'.$vend_id.'" style="display: inline-flex;">';
  $output .= $star;

  $output .= '</div>';
  $output .= '<input type="hidden" class="rate_inpt'.$vend_id.'" value="" />';
  $output .= '<div>';
  $output .= '<textarea id="r_body'.$vend_id.'" placeholder="Write a review here.." style="width: 90%; margin-left: 10px; outline: none; border-width: 0 0 0.3px 0;" ></textarea>';
  $output .= '<div style="width: 100%; text-align: right;"><button style="margin:0 10px 10px 0; outline: none;" onclick="review(\'v_review_box'.$vend_id.'\', \'rate_inpt'.$vend_id.'\')">Review</button></div>';
  $output .= '</div>';
  $output .= '</div>';

  echo $output;
}```

Answer 1

1. elem is out of scope when the callback runs. You need to take a copy.
2. all those getElements are plural - they return a collection
3. I do not see your "star" function so I wrote one
4. I added encodeURIComponent to allow for various characters in the review text

Try this - I no longer need the other parms

'<button onclick="review(\''.$vend_id.'\')">Review</button>'

using

var currentElem, vendor={};
function star(vendid,rating) {
  vendor[vendid].rating = rating;
}
function review(vend_id) {
  currentElem = document.getElementById(elem);
  currentElem .innerHTML = 'Sending review... ';
  var review_box = 'r_body'+vend_id;
  var body = document.getElementById(review_box).value;
  var star = vendor[vendid].rating;
  xhttp.onreadystatechange = function(){
    if ( this.readyState == 4 && this.status == 200) {
        currentElem.innerHTML = this.responseText;           
    }
  };
  xhttp.open("GET", "event_menu_file/vendor_review.php?star="+star+
  "&body="+encodeURIComponent(body)+
  "&reviewer_id="+user_id+"&event_id="+event_id+
  "&vendor_id="+vend_id, true);
  xhttp.send();
}

Actually you just need to save the vend_id and take the rest from there.

Answer 2

By writing the javascript review function and the php reviewer function, I got the code working perfectly. It appear that when "document.getElementById(elem).innerHTML = 'Sending review... ';" came first it updated the entire Dom there by making the rate_inpt and review_body unavailable, by keeping it below -- problem solved.

// the updated javascript function
function review(vend_id)
{
  var elem = 'v_review_box'+vend_id;

  var starinput = document.getElementById('rate_inpt'+vend_id).value;
  var body = document.getElementById('review_body'+vend_id).value;
  body_escaped = encodeURIComponent(body);  
  document.getElementById(elem).innerHTML = 'Sending review... ';
 star="+starinput+"&body="+body_escaped+"&reviewer_id="+user_id+"&event_id="+event_id+"&vendor_id="+vend_id);

 xhttp.onreadystatechange = function(){
    if ( this.readyState == 4 && this.status == 200) {
      document.getElementById(elem).innerHTML = this.responseText;           
    }
  };

  xhttp.open("GET", "event_menu_file/vendor_review.php?star="+starinput+"&body="+body_escaped+"&reviewer_id="+user_id+"&event_id="+event_id+"&vendor_id="+vend_id, true);
      xhttp.send('');
}

for the php function reviewer I updated it thus

function reviewer($vend_id)
{

$star = '<img class="starImg" srcset="star.png" src="star.svg" width="16px" height="16px" onclick="star('.$vend_id.', 1)">
         <img class="starImg" srcset="star.png" src="star.svg" width="16px" height="16px onclick="star('.$vend_id.', 2)">
         <img class="starImg" srcset="star.png" src="star.svg" width="16px" height="16px" onclick="star('.$vend_id.', 3)">
         <img class="starImg" srcset="star.png" src="star.svg" width="16px" height="16px" onclick="star('.$vend_id.', 4)">
         <img class="starImg" srcset="star.png" src="star.svg" width="16px" height="16px" onclick="star('.$vend_id.', 5)">';

  $output = '<div id="v_review_box'.$vend_id.'">';
  $output .= '<div id="rating'.$vend_id.'" style="display: inline-flex;">';
  $output .= $star;

  $output .= '</div>';
  $output .= '<input type="hidden" id="rate_inpt'.$vend_id.'" value="" />';
  $output .= '<div>';
  $output .= '<textarea id="review_body'.$vend_id.'" placeholder="Write a review here.." style="width: 90%; margin-left: 10px; outline: none; border-width: 0 0 0.3px 0; background-color: #f6f6f6;" ></textarea>';
  $output .= '<div style="width: 100%; text-align: right;"><button style="margin:0 10px 10px 0; outline: none;" onclick="review('.$vend_id.')">Review</button></div>';
  $output .= '</div>';
  $output .= '</div>';

  echo $output;
}

Answer 3

您正在调用带有两个参数的函数审查，并且它定义了4个参数