关于Thymeleaf的th:text之后,js使用document.getElementById(“id“).value取不到值的问题

在前端开发中遇到一个情况,尝试通过JavaScript的getElementById方法直接获取id为'userName0'的元素值失败,虽然页面能正常显示。解决办法是通过获取元素的innerText属性来得到值。这是一个关于前端页面元素操作的常见问题。

前端页面,需要取 id=“userName0” 的值 ,
直接使用document.getElementById(“userName0”).value取不到值,但是页面能显示 。

<p class="bg-info">
							<div th:if="${my_message0.messageClass}==3">
								<img th:src="@{${WriteUserImg0}}" alt="..." class="img-circle" width="40" height="40">
								<a id="userName0" th:inline="text">[[${WriteUserName0}]]</a>
								<br>
								<a th:text="${my_message0.message}"></a>
								<br>
								<button type="button" onclick="createStaff()" class="btn btn-primary">确认入职</button>
							</div>
						</p>

后面发现通过

let writet=document.getElementById("userName0");
	let write= writet.innerText;

使用innerText 即可取值

<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <head> <th:block th:include="include :: header('123456789')"/> <th:block th:include="include :: datetimepicker-css"/> <!-- <th:block th:include="include :: datetimepicker-css"/>--> <th:block th:include="include :: bootstrap-fileinput-css"/> </head> <style> </style> <body> <div> <div> <input type="text" name="filex" id="inputfile"> <div class='file-loading'> <input class='form-control file-upload' name='file' type='file' id="filex"> </div> </div> <div> <button onclick="chuli()">确定</button> </div> </div> <th:block th:include="include :: footer"/> <th:block th:include="include :: echarts-js"/> <th:block th:include="include :: datetimepicker-js"/> <th:block th:include="include :: bootstrap-fileinput-js"/> <script th:inline="javascript"> $(".file-upload").fileinput({ uploadUrl: ctx + 'common/upload', maxFileCount: 1, autoReplace: true, showPreview: false }).on('fileuploaded', function (event, data, previewId, index) { $("input[name='" + event.currentTarget.id + "']").val(data.response.url) }).on('fileremoved', function (event, id, index) { $("input[name='" + event.currentTarget.id + "']").val('') }) function chuli() { const x = document.getElementById("inputfile"); alert(x.value); } </script> </body> </html> 我使用的ruoyi框架,是bootstrap版本的,这是我的代码,我现在是通过组件打开的,我现在希望我点击确定能把我拿到的传回上一个页面
09-09
需要通过IDEA,java语言开发一个界面,通过接口的方式将一些参数,传递给通过unity发布的webgl页面,实现打开webgl页面的内容,怎么实现,具体需要做哪些内容,需要怎么写代码,给出详细的方案和代码,主要传递的参数为以下内容,给出详细的开发过程和完成的代码,参数为字段名 类型 说明 DoorName string 车门名称 IsPart Bool 是否为部件认知 PartName string 部件名称,空时进入部件整体认知 PartChildName string 子部件名称 FitType string 装配类型(1.安装 2.拆卸 3. 例检养护 4.故障检修 5.高级修) CourseName string 课程名称 AdjustChildName string 调整子工序名称 FromStep int 步骤开始序号 EndStep int 步骤结束序号 TargetStep int 点对点步骤序号,需要将这个webgl界面嵌入在java开发的这个页面中,且页面具备可以上一步下一步控制步骤序号的能力,采用158.58.50.11的服务器部署呢,课程名称写死,在java开发页面上只有上一步和下一步和打开的webgl界面,webgl部署在158.58.50.11的服务器上面,有个index文件,代码为<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>WebGL 控制面板</title> <script> let currentStep = 2; function updateStep(step) { currentStep = step; document.getElementById("TargetStep").value = step; sendToIframe(); } function sendToIframe() { const iframe = document.getElementById('webglFrame'); const data = { DoorName: document.getElementById("DoorName").value, IsPart: document.getElementById("IsPart").checked, PartName: document.getElementById("PartName").value, PartChildName: document.getElementById("PartChildName").value, FitType: document.getElementById("FitType").value, CourseName: document.getElementById("CourseName").value, AdjustChildName: document.getElementById("AdjustChildName").value, FromStep: document.getElementById("FromStep").value, EndStep: document.getElementById("EndStep").value, TargetStep: document.getElementById("TargetStep").value }; const jsonStr = JSON.stringify(data); iframe.contentWindow.postMessage({ type: 'fromParent', message: jsonStr }, '*'); } </script> </head> <body> <h2>Unity WebGL 控制面板</h2> <label>车门名称:</label> <input type="text" id="DoorName" value="客室塞拉门MSA2410500"><br><br> <label>是否为部件:</label> <input type="checkbox" id="IsPart"><br><br> <label>装配类型:</label> <select id="FitType"> <option value="1">安装</option> <option value="2">拆卸</option> <option value="3">例检养护</option> <option value="4">故障检修</option> <option value="5">高级修</option> </select><br><br> <label>部件名称:</label> <input type="text" id="PartName" value="承载驱动机构"><br><br> <label>子部件名称:</label> <input type="text" id="PartChildName" value="机架体"><br><br> <label>课程名称:</label> <input type="text" id="CourseName" value="测量"><br><br> <label>调整子工序名称:</label> <input type="text" id="AdjustChildName" value="调整分支1"><br><br> <label>步骤起始编号:</label> <input type="text" id="FromStep" value="1"><br><br> <label>步骤结束编号:</label> <input type="text" id="EndStep" value="4"><br><br> <label>目标步骤编号:</label> <input type="text" id="TargetStep" value="2"><br><br> <button onclick="updateStep(currentStep - 1)">上一步</button> <button onclick="updateStep(currentStep + 1)">下一步</button> <button onclick="sendToIframe()">发送数据</button> <iframe id="webglFrame" src="http://158.58.50.10:8012/Build_WEBGL?DoorName=客室塞拉门MSA2410500&IsPart=false&FitType=1&CourseName=安装上密封框&FromStep=1&EndStep=12&TargetStep=2" width="1200" height="700"></iframe> </body> </html> 怎么通过接口传递这些参数
07-25
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爷可是个天才

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值