1. I wrote a WeChat applet, a Sudoku game, to determine whether it meets the requirements (Sudoku rules) based on the number entered. However, I encountered a problem, how to find the position of the number entered by the user, because it needs to be based on the number entered by the user. The position is passed into the corresponding script file to determine whether the rules are met, but because I am not very proficient in js, I cannot solve the positioning problem.
<view class="page-body">
<view class="bc" wx:for="{{numbers}}" wx:for-item="row" >
<view wx:for="{{row}}" class="bc_ bc_{{item}}" bindtap="oninput">
<input wx:if="{{item == 0}}" auto-focus wxkey="*this" maxlength="1" value="" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" type="number" style="color:#000000" bindinput="EventHandle"/>
<view wx:else>{{item}}</view>
</view>
</view></view>
Where numbers is an array in the script file, and the style is implemented using two loops.
It will determine whether each number is zero (the array we wrote manually at the beginning, 0 represents user input). If it is zero, no characters (strings) will be displayed here.
Here is the front-end display code and display effect. The blank space is used for users to fill in numbers, but I don’t know how to find where the user entered the numbers. I hope someone can guide me. one time.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Let me talk about my ideas, for reference only:
Each small square is an object, with x and y attributes, representing the y-th square in the x-th row. Each small square is calculated through the size of the external p box The size of the grid, and then the area range of each small square can be known. When the user clicks, the coordinates of the click point are obtained, and which small square falls inside is calculated.
In short, it’s a mathematical calculation problem
Idea:
Each square has data-x='??' and data-y='??' attributes. When the user clicks, he can obtain x and y, and then perform subsequent calculations and judgments.
The event object in the WeChat applet is processed and contains the value attribute of the input.
WeChat Mini Program - Events
Let me explain my thoughts in detail:
The event of the WeChat applet can store additional data set by the element. For example, if you write the data-x attribute in the dom, you can use event.target.dataset.x to get it out.
If it is a form element, such as the value of input, it is stored in event.detail.value.
You can listen to an event for input, and then write attributes of data-x and data-y to the element. The values of the attributes are numbers and the subscript of row (that is, index. To avoid confusion, use wx:for-index ="XXX" gives two subscript aliases), determine the position of the user's click through the subscript value, and then store it in the corresponding position of the array.