Click on a button in a WebBrowser control - html

Question

HTML Body, Ty For help me.
<div class="bottoms_list">
<div class="One cell">
<button class="active"><span><i class="Picture"></i></span>1</button>
</div>
<div class="Two cell">
<button class=""><span><i class="Picture"></i></span>2</button>
</div>
<div class="three cell">
<button class=""><span><i class="Picture"></i></span>3</button>
</div>
<div class="four cell">
<button class=""><span><i class="Picture"></i></span>4</button>
</div>
</div>
Here button (1) is active.
Let's say I want to activate button (2).
I tried:
Dim spanpic As String = ""
For Each choice As HtmlElement In Form1.WebBrowser1.Document.GetElementsByTagName("div")
If choice.GetAttribute("className").Contains("bottoms_list") AndAlso choice.Id.StartsWith("2") Then
spanpic = choice.Id
For Each elm As HtmlElement In choice.Document.GetElementsByTagName("button")
If elm.GetAttribute("className") = "button" Then
elm.InvokeMember("click")
Exit For
End If
Next
End If
Next
'''''''''''''''''
Threading.Thread.Sleep(100)
Try
For Each elm As HtmlElement In
Form1.WebBrowser1.Document.GetElementById(spanpic).Document.GetElementsByTagName("button")
If elm.GetAttribute("className") = "bottoms_list" Then
If elm.GetAttribute("disabled") = "disabled" Then
Else
Exit For
End If
End If
Next
Catch
End Try
That's all I know, and I don't have good experience with element ids......................................

Answer 1

Try this :
"get collection of all div in the webpage"
For Each divSect As HtmlElement In WebBrowser1.Document.GetElementsByTagName("div")
"get the div which has the tag of Two Cell"
If divSect.OuterHtml.Contains("Two Cell") then
"get the button inside the div which has the tag of Two Cell"
For Each elem as HtmlElement In divSect.children
If elem.GetAttribute("className") = "button" Then
elem.InvokeMember("click")
End if
Next
End if
Next
I hope those code could solve your problem.

Answer 2

look I'm not an expert either, but if you want to set a class "active" to the pressed button, then you should use class binding techniques in most of java-script frameworks.
For me I use VueJs and here's how I would do it:
HTML Body:
<div id="myList">
<div class="bottoms_list">
<div class="One cell">
<button #click="isActive = 1" :class="{active: isActive == 1}"><span><i class="Picture"></i></span>1</button>
</div>
<div class="Two cell">
<button #click="isActive = 2" :class="{active: isActive == 2}"><span><i class="Picture"></i></span>2</button>
</div>
<div class="three cell">
<button #click="isActive = 3" :class="{active: isActive == 3}"><span><i class="Picture"></i></span>3</button>
</div>
<div class="four cell">
<button #click="isActive = 4" :class="{active: isActive == 4}"><span><i class="Picture"></i></span>4</button>
</div>
</div>
</div>
then your Vue instance should look like this :
new Vue({
el: '#myList',
data: {
isActive: 0,
},
});
You can optimize this code to one line using the v-for directive.