Buttons don't click inside the web viewer but in chrome website the buttons works fine

I have buttons in html that works perfectly fine in chrome browser but when I use web viewer and add the url,the button inside the web viewer don't work.

so what do you want to do after button clicked?
you need to know the webviewer is not full functioned as browser on PC.

Firstly, you have not shown us your Blocks nor the Web page. For the web page to communicate with your App, you need to use "WebViewStringChange".

Is the web page online or in the App?

You may find that the extra functionality of the extension Custom Web View will bring more luck:

This is my html code but when I put it on web viewer the add row button and choose image button doesn't work in mit app. Can you help me I don't know how to use mit,but I really need to finish this project before Saturday

<!DOCTYPE html>
<html>
<head>
<title>My Own Score Record </title>
<style>
body { font-size: 18px; }
table { width: 90%; border-collapse: collapse; font-size: 16px; }
th, td { border: 1px solid black; padding: 12px; }
th { text-align: left; }
input[type="text"] { font-size: 16px; padding: 8px; width: 100%; box-sizing: border-box; }
button { font-size: 16px; padding: 8px 12px; }
input[type="file"] { display: none; } /* Hide file input by default */
img { max-width: 100px; max-height: 100px; } /* Limit image size */
</style>
</head>
<body>

<input type="text" id="searchInput" placeholder="Search..." onkeyup="searchTable()">

<table>
  <thead>
    <tr>
      <th>Assessment Name</th>
      <th>Score</th>
      <th>Image</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody id="tableBody"></tbody>
</table>

<input type="text" id="newCol1" placeholder="Column 1">
<input type="text" id="newCol2" placeholder="Column 2">
<input type="file" id="imagePicker" accept="image/*">
<button onclick="showImagePicker()">Choose Image</button>
<button onclick="addRow()">Add Row</button>

<script>
  let data = JSON.parse(localStorage.getItem('tableData')) || [];

  function updateLocalStorage() {
    localStorage.setItem('tableData', JSON.stringify(data));
  }

  function updateData(rowIndex, colIndex, value) {
    data[rowIndex][colIndex] = value;
    updateLocalStorage();
    renderTable();
  }

  function deleteRow(rowIndex) {
    data.splice(rowIndex, 1);
    updateLocalStorage();
    renderTable();
  }

  function addRow() {
    const file = document.getElementById('imagePicker').files[0];
    let imageUrl = '';
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => { imageUrl = e.target.result; };
      reader.readAsDataURL(file);
    }

    const newRow = [
      document.getElementById('newCol1').value,
      document.getElementById('newCol2').value,
      imageUrl,
    ];
    data.push(newRow);
    document.getElementById('newCol1').value = '';
    document.getElementById('newCol2').value = '';
    document.getElementById('imagePicker').value = ''; // Clear file input
    updateLocalStorage();
    renderTable();
  }

  function renderTable() {
    const tbody = document.getElementById('tableBody');
    tbody.innerHTML = '';

    const searchTerm = document.getElementById('searchInput').value.toLowerCase();
    const filteredData = data.filter(row => {
      return row.some(cell => cell && cell.toLowerCase().includes(searchTerm));
    });

    filteredData.forEach((row, rowIndex) => {
      const newRow = tbody.insertRow();
      row.forEach((cell, colIndex) => {
        const cellElement = newRow.insertCell();
        if (colIndex === 2) { // Image column
          const img = document.createElement('img');
          img.src = cell;
          img.alt = 'Uploaded Image';
          cellElement.appendChild(img);
          const chooseImageButton = document.createElement('button');
          chooseImageButton.textContent = 'Choose Image';
          chooseImageButton.onclick = () => {
            document.getElementById('imagePicker').click();
            document.getElementById('imagePicker').onchange = () => {
              const file = document.getElementById('imagePicker').files[0];
              const reader = new FileReader();
              reader.onload = (e) => {updateData(rowIndex, colIndex, e.target.result);};
              reader.readAsDataURL(file);
            };
          };
          cellElement.appendChild(chooseImageButton);
        } else {
          const input = document.createElement('input');
          input.type = 'text';
          input.value = cell;
          input.addEventListener('change', () => updateData(rowIndex, colIndex, input.value));
          cellElement.appendChild(input);
        }
      });

      const actionsCell = newRow.insertCell();
      const deleteButton = document.createElement('button');
      deleteButton.textContent = 'Delete';
      deleteButton.onclick = () => deleteRow(rowIndex);
      actionsCell.appendChild(deleteButton);
    });
  }

  function searchTable() {
    renderTable();
  }

  function showImagePicker() {
    document.getElementById('imagePicker').click();
  }


  renderTable();



</script>

</body>
</html>

By default, the native webviewer does not have access to file assets in order to upload them to the web page or localStorage in order to store data for the web page.

Try again, using the webviewextra extension, which, amongst other things, provides for these.

can you help me with the blocks I really don't know what to do

Import the extension, then

image

should be all you need

where can I find webviewextra? or how can I have webviewextra

You could have followed the previous link

to find the download link Metricrat Extensions

Tsifun

when I add the webviewextra my screen turn all white, and I follow the blocks that you give me

Try this:

wveTest1.aia (26.7 KB)

it doesn't work either

Well you cannot import an aia project as an extension.

Upload the aia project to your AppInventor, then open it.

I really don't know what to do with my project I'm just new in mit. app and I try using the webviewextra but the screen become white and I try the other aia but it doesn't work either. how can I fix this now? I really appreciate your help I'm just new here and don't know what to do

In what way does it not work ?

My screen still white even I use aia

You appear to have scroll bars, did you try scrolling around the web page ?

yess I did, is that wrong? :sweat:

When I don't use the block you give me the output display in my screen but if I use the block my screen goes white


Where/how are you loading the html file?