【问题标题】:Populate location attribute into text area instead of alert将位置属性填充到文本区域而不是警报
【发布时间】:2016-09-26 10:25:49
【问题描述】:

我有一个功能可以根据经度和纬度检索我的当前位置。 但是,我想用检索到的结果自动填充文本区域(Populate Here),而不是提示警报。

<!DOCTYPE html>
<html>
<head>

<script>
function getPosition() {

var options = {
  enableHighAccuracy: true,
  maximumAge: 3600000
}

var watchID = navigator.geolocation.getCurrentPosition(onSuccess, onError, options);

function onSuccess(position) {

  alert('Latitude: '          + position.coords.latitude          + '\n' +
     'Longitude: '         + position.coords.longitude         + '\n');
};

function onError(error) {
  alert('code: '    + error.code    + '\n' + 'message: ' + error.message + '\n');
}
}



</script>

 </head>
 <body>
<div data-role="page" data-theme="b">
  <div data-role="header">

        <h1>Test</h1>

</div>

    <div data-role="main" class="ui-content">
    <form name="bmiform" id="bmiform" action="result.html">
    <input type="hidden" name="actualbmi">


<label for="Location">Location:</label><button onclick = "onSuccess" id = "getPosition">PAN</button>
    <input type="text" name="Location" id="location" placeholder = "Populate Here" (document.getElementsByName('onSuccess')[0].value)>

<br>


<script type="text/javascript" src="cordova.js"></script>
 <script type="text/javascript" src="js/index.js"></script>
 </body>
</html>

【问题讨论】:

  • 欢迎来到 SO。你已经尝试了什么?你的代码有什么问题?您在开发工具中遇到什么错误(如果有)?
  • 记住你可以插入代码sn-ps!这就像在你的问题中有一个小小的 jsbin。
  • 这个问题一团糟。代码格式不整齐。它在 JavaScript 和 HTML 之间切换,就好像它们是同一种语言一样。它会抛出语法错误,这些错误会出现在控制台中(并且没有任何迹象表明要查看这些错误消息或询问它们的含义)。它询问“文本区域”,然后使用&lt;input&gt; 而不是&lt;textarea&gt;
  • @Quentin 对不起,我已经编辑了代码的格式。看看吧。

标签: javascript html cordova


【解决方案1】:

假设你在 html 中有一个跨度

<span id="myspan"><span>

在您的 onSuccess 函数中,您将设置该跨度的 innerHTML,它位于开始标签和结束标签之间:&lt;span&gt;innerHTML is here&lt;/span&gt;

var span = document.getElementById("myspan");
var text = document.createTextNode(position.coords.latitude);
span.innerHTML = ''; // clear existing
span.appendChild(text);

您可以尝试自己添加经度。祝你好运!

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-10-14
    相关资源
    最近更新 更多