为什么JavaScript结果总是返回第一个值

Why the JavaScript result always return first value?

本文关键字：返回 第一个 JavaScript 结果 为什么      更新时间：2023-09-26

这是我的问题。我目前正在尝试使用一些模块自定义joomla文章内容。因为我试图在用户点击输入之前隐藏一些div。假设用户单击Test1，这是一个单选按钮，然后我用div隐藏的另一个字段将显示Test1的内容。所有细节都是从mysql数据库加载的。

这是我试图显示值的javascript代码。但它总是给我显示第一个值，尽管我点击了其他值，比如Test2或Test3。

示例：

<script type="text/javascript">
        function showBox1(){
            document.getElementById('hideBox1').style.display ="";
var test = document.getElementById('123').value;
confirm (test);
</script>

这是我的php代码：

<?php
// Get default database object
$db =JFactory::getDBO();
// Get a new JDatabaseQuery object
$query = $db->getQuery(true);
// Build the query
$query->select($db->quoteName('campusid'));
$query->from($db->quoteName('campus'));
$query->where($db->quoteName('collegeid').'='. $db->quote('1'));
// Set the query for the DB oject to execute
$db->setQuery($query);
// Get the DB object to load the results as a list of objects
$results = $db->loadObjectList();
if($results){
     foreach($results as $result)
     {
        echo "<label class='option block spacer-t10'>";
         echo "<input type='radio' name='$result->campusid' id='123' value='$result->campusid' onClick='return showBox1()'><span class='radio'></span>";
 echo $result->campusid;
 echo '</label>';
 } 
}
else{ echo 'Error';}
?>

例如，第一个div的输出是3个单选按钮，每个单选按钮都有自己的值。当用户单击单选按钮中的任意一个1时，它应该传递正确的值以显示出来，这样我就可以将该值带到下一个div来选择我的数据库数据。我在代码上犯了什么错误吗？尽管我点击了其他单选按钮，但我总是得到第一个值？

每个单选按钮本身就是一个元素。无线电组不是单个元素。

每个单选按钮都有相同的id，这是无效的，在HTML中是不允许的。

当您getElementById时，浏览器会尝试执行错误恢复，并获取具有该id的第一个元素（忽略其他元素）。

如果你想处理一组元素，那么：

  1. 让他们成为一个班的成员
  2. getElementsByClassName
  3. 循环结果并测试checked属性
  4. 当您找到一个真正的checked时，取元素的value

您的单选按钮具有相同的id 123。您正在使用此id从DOM中选择元素。请确保每个单选按钮都有一个唯一的id。

如果将元素传递给函数，则甚至不需要Id。

HTML:

onClick='return showBox1(this)'

JavaScript

function showBox1(element){
    confirm (element.value);
}

首先，所有单选按钮都具有相同的id属性："123"。

document.getElementById（）函数期望某个id在一个页面上只出现一次。

如果你想获得id为"123"的元素的选定值，那么你应该这样选择：

var test=document.querySelector（"#123:checked"）[0].value

如果这不起作用，请尝试：

var test=document.querySelector（"[id=''"123''"]：已检查"）[0].value
相关文章：