Webviewstring result

MIT App Inventor Help
1

Should I get the same result from using webviewstring that I get from chrome console ?
In chrome console using "document.querySelector(".autocomplete-items")" gives me one result.
but
Untitled
gives "undefined".

Shouldn't I get the same result ?

2

Without context it is difficult to advise...

You are querying elements that have a "class" autocomplete-items ?

3

Yes .autocomplete-items is the class ... and "document.querySelector(".autocomplete-items")"
works fine in chrome console.. I imagined that id get the same result with webviewstring.
Untitled
returns the innerText with webviewstring so everything is working fine just not the querySelector it seems.

4

I can't get it to work either, and not getting much luck out of classNames either....

5

maybe the query selector returns a list that can't be passed to webvievstring which needs a string

6

Good point, I suspected something similar but wanted confirmation from someone with greater understanding.
Ill keep tinkering.

Thanks for your time.

7

Queryselector returns an element, you need to get its innerText or inner HTML.

8

I have it working now:

blocks

image
image771×391 36.7 KB

This will return the id of the element with the class indicated

html

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<head>
<title>Classes</title>
<style>
	.red {
		color:red
	}
	.yellow {
		color:yellow
</style>
</head>
<body>
	<h4>Testing Classes</h4>	
	<p id="firstText" class="red">Hello World</p>
	<p id="secondText" class="yellow">Greetings Earth</p>
</body>
</html>

By default querySelector should just return the first instance, therefore it is not in a list/object.

Now to look at multiple returns...

Use querySelectorAll, which generates an html collection object (returns undefined by itself)

blocks

image
image834×427 39.3 KB

html

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<head>
<title>Classes</title>
<style>
	.red {
		color:red
	}
	.yellow {
		color:yellow
</style>
</head>
<body>
	<h4>Testing Classes</h4>	
	<p id="firstText" class="red">Hello World</p>
	<p id="secondText" class="yellow">Greetings Earth</p>
    <p id="thirdText" class="red">Bienvenue</p>
</body>
</html>
1 Like
9

Can I return the innerHTML of a class ?

10

Not the class, but the element that has the class.

11

ok, I struggle to get my head around how HTML is structured but that might be worth a try, what's the correct syntax for it ?
The whole of the outerHTML is lots of text to sort and split so anything that might give a better starting point would be a benefit.

12

In my example above replace .id with either .innerHTML or .textContent or .innerText

13

That does cut out a lot of the background text.
Thanks

14

// select all elements with the class name "example"
var elements = document.getElementsByClassName("example");
let string="";

// Get the innerHTML of each selected element
for (var i = 0; i < elements.length; i++) {
string=string+elements[i].innerHTML +",":
};
alert(string);